Need help creating a layout with DIVs

Question

This is what I want my page to look like:

I'm not quite there yet. Here's where I'm at: http://labs.pieterdedecker.be/test/test.htm

I'm quite new to using <div>s (as opposed to <table>s) to create the layout of my pages. How do I get the job done?

Answer 1

Simply add the below code:

 <div style="clear:both; margin-left:20px;">

after the line:

<div id="body">

That is:

<div id="body">
<div style="clear:both;">

More info about the clear property.

Also, have a look at good tutorial:

Div based layout with CSS

Answer 2

the problem i'm seeing now is that your blue 'item' boxes don't look right. i think the reason for that is that the div containing the 'item' boxes should be contained inside the main 'body' box. it is in fact the very first thing inside the 'body' div.

to make this easier on yourself, you should create a div inside the 'body' div, with width: 100% and background: blue (or whatever color that is). then, inside that div you can create your list of items.

the obvious way to put the "items" inside the "item bar" would be to float:left all the items inside their own divs. you would then need to set a static height for the "item bar" itself (like height: 2em), because a div containing only floating elements has no height.

Answer 3

try including clear:both in the body div.

  <div id="body" style="clear: both">
    <p>This is my body</p>
  </div>

good luck! ;-)

Answer 4

You can fix the menu by just adding 2 CSS style rules:

.menu { overflow: hidden; }
.menu ul { margin: 0; }

The overflow will leave a taller menu because of the browser default <ul> margin, just clean this up with the second style, which will knock the margin out.