3 Column Fluid Layout (100% Height)
Fluid layouts aren’t very easy to handle especially when you would like for your pages to expand not only horizontally but also vertically. With tables it’s much easier to handle this problem, however, when it comes up to table-less layouts there are a lot more things you would need to consider.
Here is an example of the 3 Column Fluid Layout expanding 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="right-sidebar"></div> <div id="content"></div> </div> <div id="footer-push"></div> </div> <div id="footer"></div> </body> </html>
You can see it’s pretty straightforward, all the major section of the page are labeled appropriately. The only section that you might have a question about is the #footer-push, which is used to straighten up the footer, as explained and shown on the Ryan Fait’s example of the Sticky Footer.
The CSS code:
html, body { height: 100%; width: 100%; padding: 0px; margin: 0px; } body { background: url("right-sidebar-back.gif") repeat-y top right; } div#container { height: 100%; height: auto !important; min-height: 100%; margin-bottom: -100px; background: url("left-sidebar-back.gif") repeat-y top left; } div#header { height: 100px; background: #ba6f19; border-bottom: 1px solid #000; padding: 20px; } div#body { overflow: hidden; height: 100%; } /* IE6 Fix */ * html div#body { overflow: visible; } div#content { margin: 0px 300px 0px 300px; padding: 20px; } div#left-sidebar { width: 260px; float: left; padding: 20px; } div#right-sidebar { width: 260px; float: right; padding: 20px; } div#footer-push { height: 100px; } div#footer { height: 100px; background: #ba6f19; border-top: 1px solid #000; padding: 20px; }
The left and right sidebars are floating on each side of the page, they would need to have the same width as the two background images that you are using. Also if you would like to add padding to the sidebars you are going to need reduce the width with that amount.
Moreover, notice the body element, it will need to have 100% height and also to clear the floats we need to use the overflow: hidden option (for IE6 there is a bug and the overflow need to be visible to work out)
Here is an example of the 3 Column Fluid Layout expanding 100% of the page height.
Popularity: 31% [?]
Categories: CSS Layouts, CSS Tutorials, Posted on February 9, 2009 by Choppr | Log in
Is it also possible to do this kind of thing (three-column, full page height) but with a page that’s a specific width? For instance, 800 pixels wide, indeterminant height.