This is the Example of a light-weight version of the layout project entitled "UltimateCSS-20Sep" started on 20sep 2007 by BlueBoden, and used on brugbart.dk and brugbart.com. 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
And as allways i don't claim any credits, meaning; You may copy the full code, and use it in your own projects, without linking back, or mention me in any way.
<!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;
margin: 0 auto; /* The normal way to center a element, IE uses text-align instead. */
}
#CenterContent, #LeftContent, #RightContent, #CenterContent02, #TopContent {
/* This will apply the following styles, on the above comma separated ids */
background: #e6f4f4;
position: absolute;
}
#CenterContent {
width: 53.5%;
min-width: 450px;
min-height: 300px;
/* The below is used togetter with position relative or absolute */
top: 140px;
right: 30.5%;
bottom: auto; /* Optional */
left: 15.5%;
/* The above is used togetter with position relative or absolute */
}
#CenterContent02 {
width: 15%;
min-width: 100px;
min-height: 150px;
top: 140px;
right: 15.5%;
}
#LeftContent {
width: 15%;
min-width: 100px;
min-height: 150px;
top: 140px;
left: 0;
}
#RightContent {
width: 15%;
min-width: 100px;
min-height: 150px;
top: 140px;
right: 0;
}
#TopContent {
height: 135px;
top: 0;
left: 0;
text-align: center;
width: 100%;
}
</style>
<!-- Imported Styles End -->
<title>Website Title</title>
</head>
<body>
<div id="basement">
<div id="CenterContent">
</div>
<div id="LeftContent">
</div>
<div id="RightContent">
</div>
<div id="CenterContent02">
</div>
<div id="TopContent">
</div>
</div>
</body>
</html>