khr2003 Posted June 14, 2010 Share Posted June 14, 2010 Hi Last week I was designing a theme form my CMS (or actually converting a theme) that resembles twitter design. Since the website layout consists of three columns I faced the issue of the div height. Even if the div height is set to 100%, the div container does not extend to match the longest of the three columns . I have faced this issue previously; however I used different solutions which were not very efficient. I am aware of the idea of Faux Columns and also the idea of setting the parent div height to 100%, but I think both of them do not provide a sufficient solution to the problem. let us cut to the solution. Suppose you have a website layout like this one: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <style> #main-container { width: 1000px; } #left-side-bar { float: left; font: normal 12px arial, sans-serif; width: 200px; background-color: #ddeef6; } #contents { float: left; font: normal 12px arial, sans-serif; width: 600px; background-color: #ddeec8; } #right-side-bar { float: right; font: normal 12px arial, sans-serif; width: 200px; background-color: #ddeef6; } </style> </head> <body> <div id="main-container"> <div id="left-side-bar">Side bar text <br></div> <div id="contents">Lorem ipsum dolor sit amet </div> <div id="right-side-bar">Side bar text</div> <div style="clear:both"> </div> </div> if the any of the tree columns (left-side-bar, contents, right-side-bar) become very long the other div containers will not extend 100% of the parent container. To overcome this I used position, z-index and couple of extra divs. Simply, I will add an extra div to each sidebar which will extends on the whole parent container (main-container) and then using the stack order propriety (z-index) I will place these new divs behind the original menu sidebars. so the former code will look like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <style> #main-container { width: 1000px; /* set this div position to relative so the sub container that has absolute position will extened within it and not the browser*/ position: relative; } #left-side-bar { float: left; font: normal 12px arial, sans-serif; width: 200px; background-color: #ddeef6; /* set position to relative in order for the z-index to be applied to this container */ position: relative; /* set z-index to a high number to keep the container on top of its duplicate */ z-index: 99; } #contents { float: left; font: normal 12px arial, sans-serif; width: 600px; background-color: #ddeec8; } #right-side-bar { float: right; font: normal 12px arial, sans-serif; width: 200px; background-color: #ddeef6; /* set position to relative in order for the z-index to be applied to this container */ position: relative; /* set z-index to a high number to keep the container on top of its duplicate */ z-index: 99; } #left-side-bar-bg { float: left; font: normal 12px arial, sans-serif; width: 200px; background-color: #ddeef6; /* add absolute position to this selector*/ position: absolute; /* add top and bottom margins of the absolute position*/ top: 0; bottom: 0; /* since this is the selector for left menus bar we add the left margin */ left: 0; /* set z-index to 0 to keep it the container lower than the original one */ z-index: 0; } #right-side-bar-bg { float: right; font: normal 12px arial, sans-serif; width: 200px; background-color: #ddeef6; /* add absolute position to this selector*/ position: absolute; /* add top and bottom margins of the absolute position*/ top: 0; bottom: 0; /* since this is the selector for right menus bar we add the right margin */ right: 0; /* set z-index to 0 to keep the container lower than the original one */ z-index: 0; } </style> </head> <body> <div id="main-container"> <--! the background div for the left side bar--> <div id="left-side-bar-bg"></div> <div id="left-side-bar">Side bar text <br></div> <div id="contents">Lorem ipsum dolor sit amet </div> <div id="right-side-bar">Side bar text</div> <--! the background div for the right side bar--> <div id="right-side-bar-bg"></div> <div style="clear:both"> </body> you can use colours or images as a background without any hassle. I have added an elaborate tutorial on my blog, if you would like more detail: http://diy-cms.com/mod.php?mod=blog&modfile=viewpost&blogid=20 Hope this helps. Quote Link to comment Share on other sites More sharing options...
V Posted June 29, 2010 Share Posted June 29, 2010 Thanks for sharing Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.