This is a part of the tutorial entry: CSS Position Based Layouts. Read the comments in the CSS, for further explanation. Comments are explained in the Reference entry: Comments in CSS
You may use this layouts in your own projects, without linking back, and without referring to me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<!-- Imported Styles Start -->
<style type="text/css">
body {
background: #72c1ca;
margin: 0;
padding: 1em;
text-align: center; /* IE specific way to center divs */
}
#basement {
position: relative; /* Used to anable absolute positioning "inside" basement */
width: 100%;
min-width: 900px;
max-width: 1520px;
margin: 0 auto; /* The normal way to center a element, IE uses text-align instead. */
}
#CenterContent, #LeftContent {
/* This will apply the following styles, on the above comma separated ids */
background: #e6f4f4;
position: absolute;
min-height: 300px;
top: 0; /* used togetter with position relative or absolute the properties are: top|right|bottom|left */
}
#CenterContent {
right: 0;
width: 84%;
}
#LeftContent {
left: 0;
width: 15%;
}
</style>
<!-- Imported Styles End -->
<title>Website Title</title>
</head>
<body>
<div id="basement">
<div id="CenterContent">
</div>
<div id="LeftContent">
</div>
</div>
</body>
</html>All Examples are Copyrighted by Brugbart Webdesign, and may not be copied without permission.