Content
De content geven we een margin aan de linkerkant, zodat hij naast de #sidebar komt te staan.
#content {
margin: 0px 10px 0px 220px;
padding: 9px;
}
Met de breedte doen we helemaal niets, want we willen dat de lay-out liquid is. En standaard heeft een div een breedte van 100%, dus net zo breed als de viewport, wat precies is wat we willen in dit geval. We zorgen dat de #content div een margin van 220 pixels aan de linkerkant heeft, zodat de inhoud aan de rechterkant van de #sidebar verschijnt.
Hieronder de hele CSS met wat extra styles:
<style type="text/css" media="screen">
* {
margin: 0px;
padding: 0px;
}
body {
background: #fe8;
}
h1 {
font: bold 14px arial;
}
h2 {
font: bold 12px arial;
margin-top: 5px;
}
#header {
height: 100px;
min-width: 700px;
}
#sidebar {
float: left;
padding: 9px;
width: 200px;
border-right: 2px solid #fff;
}
#content {
margin: 0px 10px 0px 220px;
padding: 9px;
}
p {
font: 0.6em verdana;
}
</style>
<!--[if IE]>
<style>
#header h1 { width: 700px; }
</style>
<![endif]-->
Voor het uiteindelijke resultaat zie voorbeeld 4
Verander ook de grootte van je venster om te checken dat de lay-out echt liquid is.