divs just not going where I want

I have been playing with some html/css strict doctype for a simple 2-column layout, and it just won't go how I want at all in IE8. Seemingly inconsequential changes have massive effects. For instance, the container won't expand to hold the links column, and sometimes it won't expand to hold the content. Those things just hang down below the whole thing like unwanted guests out on the street at a party.
plus, I wanted to put an advertisement div above the content
anyway, here's a short, stripped-right-down version of the page. If anyone could shed light on what I'm doing wrong, I will be forever grateful.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>my website</title>
<style type="text/css">
body
{margin:0;
padding;0;
text-align:center;
background:#EEFFEE;
font-family:Ariel, sans-serif;
font-size:.9em;}
.wrapper
{width:800px; border:solid 2px green; text-align:left; color:black; margin:10px auto;}
.header
{margin:1%;border:solid 2px green; padding:1%;text-align:left;}
.leftcol
{float:left; width:160px; margin:1%;border:0; padding:1%;}
.contentstuff
{padding:1%; margin-left:250px; border:solid 2px orange; }
.advert
{float:left; padding:1%;border: 2px solid blue;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>A cool website</h1>
<p>with very cool content</p>
</div>
<div class="navbar">
This is the navbar.
</div>
<div class="leftcol">
<p>QuickLinks</p>
<p>here are lots of links. here are lots of links. here are lots of links. here are lots of links. here are lots of links. </p>
</div>
<div class="advert">
<h3>An advertisement</h3>
</div>
<div class="contentstuff">
Here is content. here is content. Here is content. here is content.
Here is content. here is content. Here is content. here is content.
Here is content. here is content. Here is content. here is content.
</div>
</div>
</body>
</html>

why won't this do what I want? :-(

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="language" content="english"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>my website</title> <style type="text/css"> body { margin:0; padding:0; background-color:#efe; font-family:ariel,sans-serif; font-size:0.9em; } #wrapper { width:784px; height:1%; padding:8px; border:2px solid #008000; margin:10px auto; color:#000; background-color:#ded; overflow:hidden; } #header { padding:8px; border:2px solid #008000; background-color:#fcfcfc; } #navbar { padding:8px; border:2px solid #008000; margin:8px 0; background-color:#fcfcfc; } #leftcol { float:left; width:156px; padding:8px; border:2px solid #f00; margin-right:8px; background-color:#fcfcfc; } #advert { float:left; width:184px; padding:8px; border:2px solid #00f; margin-right:8px; background-color:#fcfcfc; } #contentstuff { float:left; width:368px; padding:8px; border:2px solid #ffa500; background-color:#fcfcfc; } </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>A cool website</h1> <p>with very cool content</p> </div> <div id="navbar"> This is the navbar. </div> <div id="leftcol"> <p>QuickLinks</p> <p> here are lots of links. here are lots of links. here are lots of links. here are lots of links. here are lots of links. here are lots of links. </p> </div> <div id="advert"> <h3>An advertisement</h3> </div> <div id="contentstuff"> Here is content. here is content. Here is content. here is content. Here is content. here is content. Here is content. here is content. Here is content. here is content. Here is content. here is content. </div> </div> </body> </html>

divs just not going where I want

callivert

birdbrain

callivert

benevolent001

Nouturns

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week