Forum Moderators: not2easy
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gelderse Aanpak</title>
<style type="text/css">
*{ margin:0; padding:0; border:0; }
#header{ width:960px; border:1px solid #000; margin:0 auto; background-color:#FC3;}
#content{ width:960px; border:1px solid red; margin: 0 auto; }
#footer{ width:960px; border:1px solid yellow; margin:0 auto; clear:both; background-color:#999;}
#left{ width:200px; position:relative; float:left; border:1px solid blue; background-color:#C9C;}
#right{ width:750px; position:relative; float:right; border:1px solid green; background-color:#FCF;}
body{background-color:#000;}
</style>
</head>
<body>
<div id="header">
<h1> header </h1>
</div><!-- end of header -->
<div id="content">
<div id="left">
<p>Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.<br />
</p>
<p>Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.<br />
</p>
<p>Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.<br />
</p>
</div><!-- end of left -->
<div id="right">
<p>Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.<br />
</p>
<p>Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.<br />
</p>
<p>Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.<br />
</p>
<p>Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.<br />
</p>
<p>Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.<br />
</p>
<p>Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.<br />
</p>
<p>Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.<br />
</p>
<p>Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.<br />
</p>
</div><!-- end of right -->
</div><!-- end of content -->
<div id="footer">
<p>footer data</p>
</div><!-- end of footer -->
</body>
</html>
However:
1) You will probably need to declare a full, valid DTD for {margin: 0 auto;} to work in IE.
2) It might be simpler to use a wrapper <div> around everything:
#wrapper {
margin: 0 auto;
width: 960px;
}
This would allow you to remove the declarations from #header, #content, and #footer - putting them in one place and making the other IDs a little neater and easier to read later.
Also - what do the <br /> do for you at the end of each <p>? If you are 'creating space' or some such, then padding-bottom: on the <p> would be a much cleaner approach.? Can say without understanding the purpose.
That's as intended.
If you want it differently: add a <br class="clear" /> inside the parent after the floated columns. and give it "clear:both;" in the css.
Or lookup clearfix and use that technique (but be extra careful of the hacks many of the examples you'll find contain).
