CODEWITHSUNDEEP
htmlcssxhtmllayout
Pieter
Pieter

Reputation: 32805

Need help creating a layout with DIVs

This is what I want my page to look like:

Mockup http://img64.imageshack.us/img64/5974/pagedh.jpg

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?

Upvotes: 1

Views: 128

Answers (4)

Nick Craver
Nick Craver

Reputation: 630637

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.

Upvotes: 1

kctang
kctang

Reputation: 11202

try including clear:both in the body div.

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

good luck! ;-)

Upvotes: 1

Igor Serebryany
Igor Serebryany

Reputation: 3341

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.

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382909

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

Upvotes: 0

Related Questions