Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- 2, 3, Multi Column CSS Templates and Layouts

SuzyUK - 2:12 pm on Jul 24, 2004 (gmt 0)


3 Column Layout - Center fixed, Left/Right Fluid - Origin [webmasterworld.com]
side columns are Absolutely Positioned and clear the content using margins on internal elements


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3 Column CSS Template - Left/Right Fluid - Center Fixed</title>

<style type="text/css">
html,body {padding: 0; margin: 0;}

body {text-align: center; /* IE center */}

#content {
width: 760px;
margin: 0 auto; /* compliant browser center */
text-align: left; /* re align text */
}

.column {
width: 50%;
position: absolute;
top: 0;
text-align: left;
}

.left {left: 0;}
.right {right: 0;}

#leftcol {margin-right: 380px;background: #eee; }
#rightcol {margin-left: 380px; background: #ccc;}
</style>

</head>
<body>

<div id="content">Center column fluid</div>

<div class="left column">
<div id="leftcol">Left column fixed width</div>
</div>

<div class="right column">
<div id="rightcol">Right column Fluid</div>
</div>

</body>
</html>

Thread source:: http://www.webmasterworld.com/css/4185.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com