Witam,

Nie wiem za bardzo jak dobrze zatytułować ten wątek, więc może dla tego nie znalazłem rozwiązania w google.
Chciałem zrobić coś takiego:
Mam 4 diwy obok siebie w 1 kolumnie i 2 divy obok siebie w 2 kolumnie. Teraz chciałbym aby wszystkie diwy w danej kolumnie rozszerzały się równomiernie, czyli w 1 kolumnie po +-25% oraz w 2 po +-50%.
Dla każdego diva jest ustawiona min-width: 100px. Jeśli przeglądarka zmieni swój rozmiar tak, że w 1 kolumnie zabraknie miejsca to od prawej diwy mają spadać w dół.

Najlepiej sprawdza się display: inline-block; ale nie wiem jak rozszerzyć divy równomiernie.

Mam nadzieję, że przynajmniej dobrze to wytłumaczyłem o co mi chodzi.
Czekam na jakiekolwiek propozycje

Pozdrawiam.

Coś w tą stronę: http://jsfiddle.net/M3Afr/

Bardziej coś takiego: http://jsfiddle.net/qVEMd/

tylko te box`y czerwone po lewej stronie muszą się rozszerzać równomiernie. I jeśli przekroczą granicę szerokości mają spadać jak by były ustawione na display: block;

Napisałem prostą wtyczkę do tego:

[XML] pobierz, plaintext 
(function($) {
    $.fn.extend({
        schemaContainerTable: function($options) {
            var $root = this;
            var $defaults = {
                minRowWidth: 800,
                rootWidth: '100%'
            };
 
            $options = $.extend($defaults, $options);
 
            $root.width($options.rootWidth);
 
            var setContainerItems = function() {
                var $rows = $root.find('> div');
 
                if($rows.length > 0) {
                    $.each($rows, function() {
                        var $rowWidth  = $(this).width();
                        var $colsInRow = $(this).find('> div');
 
                        $(this).css({
                            display: 'block',
                            overflow: 'hidden'
                        });
 
                        if($rowWidth > $options.minRowWidth) {
                            $colsInRow.width(parseInt($rowWidth/$colsInRow.length));
                        }
 
                        $.each($colsInRow, function() {
                            $(this).css({float: 'left'});
                        });
                    });
                }
            }
 
            setContainerItems();
            $(window).resize(function() {
                setContainerItems();
            });
        },
     });
})(jQuery);
[XML] pobierz, plaintext 

Użycie jej:

[HTML] pobierz, plaintext 
<scirpt>
$(function(){ 
$('div.container').schemaContainerTable();
});
</script>
<div class="container">
                <div>
                    <div>{{ form.shortName|raw }}{{ form.country|raw }}</div>
                    <div>{{ form.taxNumber|raw }}{{ form.city|raw }}</div>
                    <div>{{ form.type|raw }}{{ form.street|raw }}</div>
                    <div>{{ form.category|raw }}{{ form.zipcode|raw }}</div>
                    <div>{{ form.isActive|raw }}{{ form.voivodeship|raw }}</div>
                </div>
                <div class="clear"></div>
            </div>
[HTML] pobierz, plaintext 

Ale lepiej chyba takie rzeczy robić w css i html

jak chcesz mieć je jak tabela to czemu nie display:table?
http://quirksmode.org/css/css2/display.html#table

@com

Ponieważ jak wyświetlę je tak jakbym robił tabelki to po zmniejszeniu strony divy od lewej nie spadały by.