Geek Answers Handbook

CSS: two floating div columns with the same height, with vertically divided right div

I am trying to execute a layout as shown below:

enter image description here

Two floats: left divs are located side by side, each with 45% of the width. On the right, the div contains two subsections: one aligned to the bottom of the div, and the other to the top.

If the sections on the right are long enough, they will, of course, occur in the middle, and then start pushing the height of the containing div:

enter image description here

I played with faux-columns, clear: all, overflow: hidden, bottom: 0 and any other tricks I could think of, but I can't get this behavior to work.

The real problem, apparently, is that the smaller of the left and right div does not expand to the height of the container, which occupies the height of the larger of the two, using overflow: hidden. Any thoughts?

:

<div style="overflow:hidden; clear:both">
    <div id="column1" style="float: left; width:45%">
    <div id="column2" style="float: left; width:45%">
        <div style="float: left; top: 0">Content Here should sit up top</div>
        <div style="float: left; bottom: 0">Content Here should sit on bottom</div>
    </div>
</div>

, , -:

enter image description here

, !

+5
5

CSS, JS .

:

"" inline blocks , , "" ( )

+4

display:table-cell ( table, table-row...), IE8 .

, javascript, IE6/IE7 ( ...).

+1

, CSS .

, display: table, .

JS, - jQuery, , .

+1

JavaScript, $(document).ready 3 , . div ( ) div (expansor).

, var dos = $("#one").height(); div id = "one"

div, $("#expansor").height(newHeight) ;

"newHeight" div div.

+1

, , JavaScript.

, min/max-height. DIV, , "clear: both" DIVs, , .

:

<!-- Clear CSS -->
.clear {
    clear:both;
    height:0;
    line-height:0;
    margin:0;
    padding:0;
    font-size:0;
    border:none;
}
<!-- End CSS -->

<div id="container" style="width:400px;position:relative;">
    <div id="column-right" style="height:300px;width:195px;float:right;">
        <div id="block-top" style="position:absolute;top:0;height:145px;">
            <div class="content">
                ...
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div id="block-bottom" style="position:absolute;bottom:0;height:145px;">
            <div class="content">
                ...
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div id="column-left" style="position:relative;height:300px;width:195px;float:left;">
        <div class="content">
            ...
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div class="clear">&nbsp;</div>
</div>
+1

More articles:


All Articles