Search code examples
htmlcsspositioningcss-float

CSS - How to float correctly into pseudocolumns

Please see the image below. Assume that these are all divs with the given ids. Also, let's assume that they carry the same weight semantically so they should be at the same point in the html hierarchy:

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

What is the proper CSS to position them correctly so as to appear as in the image below? The solution should flow properly as the browser is resized and preferably work on >=IE7.

Div element positioning

Think of this as an action panel (#1) and 3 information displays (#2, #3, #4) so it is probably expected for 2,3,4 to expand in width to fill the browser window and flow below the action panel as the browser shrinks.

Solution

  • Use this

    #id1, #id2, #id3, #id4{ float:left; }
#id1{ width:50%; height:300px; background-color:red; }
#id2{ width:50%; height:50px; background-color:blue; }
#id3{ width:25%; height:250px; background-color:green; }
#id4{ width:25%; height:250px; background-color:yellow; }

    demo at http://jsfiddle.net/gaby/wsEt6/

    I altered your ids as they are not allowed to be numeric.
    http://www.w3.org/TR/html4/types.html#h-6.2