Home
>
Fixed Centered 2 Column Layout – w Left Sidebar, Header...
Fixed Centered 2 Column Layout – w Left Sidebar, Header & Footer
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Centered 2 Column - Left Sidebar</title>
<style type="text/css">
/**
* Please note: borders are just to show you the boundaries, you will probably want to remove prior to use unless you like them...
**/
body {
min-width: 800px;
text-align: center;
}
#main-wrapper {
width: 800px;
margin: auto;
text-align: left;
border: 1px solid #CCCCCC;
}
#header {
border: 1px solid #9900FF;
}
#side-bar {
width: 200px;
float: left;
border: 1px solid #993300;
}
#contents {
margin-left: 220px;
border: 1px solid #0099FF;
}
#footer {
border: 1px solid #669900;
}
</style>
</head>
<body>
<div id="main-wrapper">
<div id="header">
Logo and menu here
</div>
<div id="side-bar">
I'm the side bar
</div>
<div id="contents">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa nibh, feugiat ut condimentum nec, ullamcorper nec ipsum. Cras vitae dolor nisl, ut scelerisque libero. Etiam nisi velit, pulvinar in volutpat posuere, venenatis nec justo. Curabitur imperdiet tellus tincidunt turpis venenatis a aliquet augue rutrum. Aliquam mattis lacus sed urna fringilla non pretium dolor sodales. Curabitur dapibus risus vitae libero dignissim et tristique enim ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non magna ipsum. Nunc sem neque, scelerisque auctor sodales blandit, pretium sit amet quam. Duis sed turpis mi, a eleifend dui. Mauris pellentesque pretium tincidunt. Fusce sit amet massa quis dui ornare feugiat. Integer consequat purus et est tempus feugiat. Praesent a libero quis leo commodo blandit in at elit. Nunc faucibus sapien id magna vehicula ac pellentesque quam volutpat. Vivamus condimentum faucibus urna a molestie. Phasellus auctor arcu id enim feugiat porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
<div id="footer">
©/sitemap stuff here
</div>
</div>
</body>
</html>
<!--
_ __
/ ) _/' _ /__)_ _ ' _ _
(__()(///)(/ / ( (-( //)(-_)
_/ /
-->
I'm the co-founder of
No comments yet.
RSS feed for comments on this post. TrackBack URL