Page is a not externally linkable
callivert - 9:20 am on Nov 2, 2009 (gmt 0)
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? :-(