simple layout in css

I try to have a few hours own layout, but I still have a problem. I would like make: http://img191.imageshack.us/img191/1243/schemal.png

I would like that the body was flexible. Max width page 900px. I can't cope with float and clear.

Live example: http://jsfiddle.net/eT开发者_Go百科Ez2/

Thanks for help!

After rearranging the HTML slightly (moving all of the sidebar items to line up with one another - oneleft, oneright, twoleft etc...), I've recreated that effect, assuming you want the body to contain the floated items, and spill out below, with this jsfiddle.

If that's not the effect you wanted, I would suggest you rearrange your HTML to have three columns, like below:

<div class="column-left"></div>
<div class="column"></div>
<div class="column-right"></div>

And within these divs, you can have whatever elements you want, and you would only need to float the left and right columns here.

Try to chop it up into different partitions first: header, footer, 2 sides and 1 content. The sides consist of 3 elements again (probably divs in your case).

<div ></div> //top bar

<div id="left column" style="width:100px;float:left;">
   <div style="float:left; width:100px;">//left boxes
   <div style="float:left; width:100px;">
   <div style="float:left; width:100px;">
   <div style="float:left; width:100px;">
</div>

<div id="center column"  style="float:left; width:500px;">
     <div style="float:left; width:490px;"> //center box
</div>

<div id="rightcolumn" style="float:left; width:100px;">
   <div style="float:left; width:100px;">//right boxes
   <div style="float:left; width:100px;">
   <div style="float:left; width:100px;">
   <div style="float:left; width:100px;">
</div>

you can also use the css property height:190px; to set various heights. hope this helps you out.