Help with divs (again)

I'm hope less with this. I want to have a header with 100% width and below that two divs. One, on the left, should take about 1/4 of the 100% and the right to have my page content. Below all of these should be a footer. This is sort of a repeat of my last question but I Here is what I have.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
<title>title</title>

<meta charset="utf-8">
<meta http-equiv="Page-Enter" content="revealTrans(Duration=3.0,Transition=23)"> 
<meta http-equiv="Page-Exit" content="revealTrans(Duration=3.0,Transition=23)">
<meta name="created" content="Wed, 22 Sep 2010 01:19:44 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="copyright" content="">
<meta name="location" content="">
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" type="text/css" href="site_css/css_2010_iestyle.css">
<script type="text/javascript" src="site_js/js_blink4IE.js"></script>
<![endif]-->
</head>
<body>

<div id="wrap"><!-- START Wrap -->


<div id="header">
<h1>Header Title</h1>
</div>

<div id="left"><h1>Left Content</h1>
<br />
Left <br />Content<br />
</div>

<div id="right"><h1 style="text-align:center;">Right Stuff</h1>
Right Content
</div>

<div id="footer">
<br />
<br />
 Footer Content
<br />
</div>


</div><!-- END Wrap -->


</body>
</html>

My Css:



html {
background:#fff;
font-size:80%;  
font-family:"trebuchet ms", tahoma, verdana, arial, sans-serif; 
}

body
{
font-size:12px;
margin:0px; overflow:auto;
background-color: black;
}

#header {
margin-top:15px;
width:100%;
height:200px;
background-color:white
}

#wrap {
width: 100%;
background-color:black;
margin:2% auto;
clear: both; 
}

#left {
background: white;
float: left;
position:absolute;
width: 20%;
border-left: 3px solid #000;
border-top: 3px solid #000;
color: #fff;
}

#right {
float: right;
width: 78.8%;
background:white;
border: 3px solid #000;
color: #fff;
overflow: auto; 
}

h1 {
font-size:200%;margin-top:0px;font-weight:normal
}

h2 {
font-size:160%;margin-top:10px;margin-bottom:10px;font-weight:normal
}

h3 {
font-size:120%;font-weight:normal
}

h4 {
font-size:100%;
}

h5 {
font-size:90%;
}

h6 {
font-size:80%;
}

h1,h2,h3,h4,h5,h6{
background-color:transparent;
color:#000000;
}

* { 
padding:0;
margin:0;
border:0;
}


h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { 
margin:1em 5%; 
}

li, dd{ 
margin-left:5%; }

fieldset { 
padding: .5em;
 }

.arialStyle { 
font-family: verdana,arial,sans-serif;
font-size: 12px;
color: #000000;
margin:0;
padding:0;
}

.romanStyle {
font-family: georgia,"times new roman",serif;
font-size: 12px;
color: #000000;
margin:0;
padding:0;
}

#footer{
margin:0 auto;
padding:20px;
padding-top:10px;
padding-bottom:0px;
background-color:black;
font-size:90%;
text-align:center;
margin-left: auto;
margin-right: auto;
width: 100%;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"><head> <title>title</title> <meta charset="utf-8"> <meta http-equiv="Page-Enter" content="revealTrans(Duration=3.0,Transition=23)"> <meta http-equiv="Page-Exit" content="revealTrans(Duration=3.0,Transition=23)"> <meta name="created" content="Wed, 22 Sep 2010 01:19:44 GMT"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <meta name="copyright" content=""> <meta name="location" content=""> <link rel="stylesheet" type="text/css" href="stylesheet.css" />  </head> <body> <div id="wrap"> <div id="header">This is text that has been put in the header box to check that it is working correctly.</div> <div id="container"> <div id="left"> <h1>This is text that has been put in the left content box to check that it is working correctly.</h1> </div> <div id="right"> <h1>This is text that has been put in the right content box to check that it is working correctly.</h1> </div> </div> <div id="footer"> This is some test text in the footer.<br /> If this is setup correctly it should display right. </div> </div> </body> </html>

html { background:#fff; font-size:80%; font-family:"trebuchet ms", tahoma, verdana, arial, sans-serif; } body { font-size:12px; margin:0px; overflow:auto; background-color:black; } #header { margin-top:15px; width:100%; height:200px; background-color:white } #wrap { width:auto; background-color:black; margin:2% auto; clear:both; } #container{ width:auto; margin:200 auto; height:auto; overflow:auto; } #left { background:white; float:left; width:20%; border-left:3px solid #000; border-top:3px solid #000; color:#fff; } #right { float:right; width:78.8%; background:white; border:3px solid #000; color:#fff; overflow:auto; } h1 { font-size:200%;margin-top:0px;font-weight:normal } h2 { font-size:160%;margin-top:10px;margin-bottom:10px;font-weight:normal } h3 { font-size:120%;font-weight:normal } h4 { font-size:100%; } h5 { font-size:90%; } h6 { font-size:80%; } h1,h2,h3,h4,h5,h6 { background-color:transparent; color:#000000; } * { padding:0; margin:0; border:0; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 5%; } li, dd { margin-left:5%; } fieldset { padding:.5em; } .arialStyle { font-family:verdana,arial,sans-serif; font-size:12px; color:#000000; margin:0; padding:0; } .romanStyle { font-family:georgia,"times new roman",serif; font-size: 12px; color:#000000; margin:0; padding:0; } #footer { margin:0 auto; padding:20px; padding-top:10px; padding-bottom:0px; background-color:black; font-size:90%; text-align:center; margin-left:auto; margin-right:auto; width:100%; }

Help with divs (again)

Divs are messed up (again)

FrenchFrysable

Jamier101

FrenchFrysable

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week