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. Link to comment https://forums.phpfreaks.com/topic/204741-a-new-technique-to-solve-the-div-height-100-issue/ Share on other sites More sharing options...
V Posted June 29, 2010 Share Posted June 29, 2010 Thanks for sharing Link to comment https://forums.phpfreaks.com/topic/204741-a-new-technique-to-solve-the-div-height-100-issue/#findComment-1078564 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.