CSS two columns with known children width

I creating some code for showing box with diffrent heights (height will be from images inside).

In this example works perfectly: http://jsfiddle.net/GSnfG/

...but when i edit some height (in future - height of image), here: box 3 set to height 100px, the results doesn't work开发者_运维问答 good.

How prepare CSS code for creating something like two columns?

I cannot use tables, also i don't want use jquery or other js It is possible?

No, it's not possible to handle this in the general case without JavaScript or a server-side language.

In some cases, you can add wrapper divs for each separate column, but some combinations of element size will make this look bad, for example: http://jsfiddle.net/suaaK/3/ - in that demo, it would probably be better if Box 6 was under Box 3. The more (and more differently sized) elements you have, the more uneven the columns can become.

See this answer for a comparison of the candidate techniques, showing that they don't work, and also showing the client-side portion of the solution involving server-side code:

• CSS Floating Divs At Variable Heights

If you're willing to use JavaScript+jQuery, you should use jQuery Masonry.

There's also a raw JavaScript version: Vanilla Masonry

Demos:

• http://desandro.com/demo/masonry/docs/filtering.html
• http://desandro.com/demo/masonry/docs/animating-jquery.html
• http://desandro.com/demo/masonry/docs/appending.html

I have provided an example through jFiddle to one possible solution

First create two columns one for the left boxes and one for the right boxes. See below.

If your concerned about your box-container width simply add .box-container {width:105px} to your css.

 <div class="container">
        <div class="left box-container">
            <div class="box" style="height:60px;">1</div>

            <div class="box" style="height:100px;">2</div>

            <div class="box" style="height:60px;">3</div>

        </div><!-- left-box-container -->

        <div class="right box-container">
            <div class="box" style="height:30px;">1</div>

            <div class="box" style="height:200px;">2</div>

            <div class="box" style="height:60px;">3</div>

        </div><!-- right-box-container -->

    </div>

If you want to have the columns end up the same height, which is to say, pad out the divs that are smaller then their neighbors you could change the css to something like this:

.box {background:#20abff; color:#fff; width: 5px; margin: 5px;}
.left {float:left;}
.right {float:left;}
.container {width:200px;}

Another thing you could do is to make pseudo tables with divs.

.Table_Wrapper { width: 400px; }
.Table_Row { width: 98%; padding: 1%;float: left; } 


<div class="Table_Wrapper">
    <div class="Table_Row">
        <div class="box left" style="height:60px;">1</div>
        <div class="box right" style="height:80px;">2</div>
    </div>
    <div class="Table_Row">
        <div class="box left" style="height:60px;">3</div>
        <div class="box right" style="height:60px;">4</div>
    </div>
    <div class="Table_Row">
        <div class="box left" style="height:60px;">5</div>
        <div class="box right" style="height:60px;">6</div>
    </div>
</div>

JSFiddle