2 Column Fluid Layout (100% height) with Left/Right Sidebar
Following the previous article, where I described how you can create a 3 column fluid layout with expanding 100% of the page height, I’ve decided to post another two similar layouts (both expand 100% of the page height):
The HTML Code:
<!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" lang="en" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">@import "style.css";</style> </head> <body> <div id="container"> <div id="header"></div> <div id="body"> <div id="left-sidebar"></div> <div id="content"></div> </div> <div id="footer-push"></div> </div> <div id="footer"></div> </body> </html>
The CSS Code:
html, body { height: 100%; padding: 0px; margin: 0px; } body { background: url("left-sidebar-back.gif") repeat-y top left; } div#container { height: 100%; height: auto !important; min-height: 100%; margin-bottom: -100px; } div#header { height: 100px; background: #ba6f19; border-bottom: 1px solid #000; padding: 20px; } div#body { overflow: hidden; height: 100%; } div#content { margin: 0px 0px 0px 300px; padding: 20px; } div#left-sidebar { width: 260px; float: left; padding: 20px; } div#footer-push { height: 100px; } div#footer { height: 100px; background: #ba6f19; border-top: 1px solid #000; padding: 20px; }
Popularity: 37% [?]
Categories: CSS Layouts, CSS Tutorials, Posted on February 9, 2009 by Choppr | Log in
