CODEWITHSUNDEEP
htmlcsslayout
Limes Norgy
Limes Norgy

Reputation: 23

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/eTEz2/

Thanks for help!

Upvotes: 2

Views: 158

Answers (3)

joncodo
joncodo

Reputation: 2328

<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.

Upvotes: 0

Nightfirecat
Nightfirecat

Reputation: 11610

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.

Upvotes: 1

Johan
Johan

Reputation: 3212

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).

Upvotes: 0

Related Questions