Elegant 2 column layout
Thursday, June 12th, 2008Based on a design developed by snook.ca (a great web design site), which creates a 2-column layout with the page elements in a sensible, semantic order in the source, I’ve come up with this variant, which is pretty much the same, but allows for more flexibility in header design. Seems to work ok in safari, firefox and ie all the way back to v5.01. See it in action.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Page</title>
<html>
<title>Efficient 2 column layout</title>
<style>
.wrapper {width:600px; height: 50em;background:lime;position:relative;}
.main {width:500px; float:right;height: 40em;background:red;}
.header{width:600px;position:absolute;height:5em;background:teal;top:0; left:0;}
.content {width:500px;height:40em;background:green;position:absolute; top:5em;}
.nav {width:100px; float:left; height: 40em; background:black; margin-top:5em;}
.footer {width:600px; clear:both;height:5em;background:cyan;}
</style>
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="header">
</div>
<div class="content">
</div>
</div>
<div class="nav">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Subscribe to some, or all, of my blog