cousineaug Posted January 26, 2011 Share Posted January 26, 2011 For some time now I have been trying to complete a fluid layout that would resize all columns as the browser size changes. Percentage widths seems to be the only way to start so I had to devise a way of assigning colour to each element of the page.Today I made a breakthrough. The trick is to use a very long div (10,000 pixels) using padding and negative margin, give it colour and wrap it in a div with overflow hidden. I finished the layout with a few tweaks and then tested in multiple browsers. I saved IE for last and of course it did not work. It seems IE does not understand the box model the same way and it did not work.My workaround was to place the footer in a higher z-index plane. With a few other tweaks I managed to get a tolerable result in IE.See the demo on my website: http://goo.gl/3XETgcode follows below if you prefer.I am seeking feedback. Start with the browser wide - centre column is longer. Shrink it a bit until left column is longer. Shrink it some more and right column is longer. In all cases, the footer falls immediately below.There is still some work to do like re-introducing margins inside the divs and testing with various block elements and images but I don't want to keep pushing in this direction if there is something semantically wrong with the approach. W3C validates ok.Finally if anyone has a prettier solution for IE, My ears are wide open..............thanks....Guy <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>CSS Fluid 3 columns</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">body { margin: 0; }.header { background: #fdb; }.header h1, .header h2, .header p { margin-top: 0px; /*need for Firefox*/ margin-bottom: 0px; /*in case header ends with an H or a p*/ }.outer { background: #bfd; /*same as right column for rounding errors*/ /*also compensates for less than 100% columns*/ overflow: hidden /*to hide the extra long bodies*/ }.left, .middle, .right { padding-bottom: +10000px; /*make them really big*/ margin-bottom: -10000px; /*and then bring them back*/ }.left { float: left; width: 10%; /*adjust 3 percentages to add up to 100 or less*/ background: #bdf; }.middle { float: left; width: 80%; background: #dbf; }.right { width: 10%; background: #bfd; float: left; }.footerholder { overflow: hidden; /*IE hack*/ }.footer { background: #dfb; padding-bottom: +1000px; /*hack for IE*/ margin-bottom: -1000px; /*to hide other 3 columns*/ position: relative; z-index: 10; /*and place it on top*/ }.footer h1, .footer h2, .footer p { margin-top: 0px; /*avoids whitespace if footer starts with an H or p*/ }.clearfloat { clear: both; }</style></head><body><div class="header"><h1>Header text</h1></div><!--end header--><div class="outer"> <!--wraps all 3 columns--><div class="left">left left left left left left left left left left left left left left left </div><!--end left column--><div class="middle">middle middle middle middle middle middle middle middle middle middle middle <br>middle <br>middle <br>middle <br>middle <br>middle</div><!--end middle column--><div class="right">right right right right right right right right right right </div><!--end right column--><br class="clearfloat"></div><!--end 3 column wrapper--><div class="footerholder"> <!--IE hack--><div class="footer"><h1>Footer</h1>Prepared by Guy Cousineau <!--cheat here to ensure footer does not end with a margin-bottom element--></div><!--end footer--></div><!--end footer holder--></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted January 26, 2011 Share Posted January 26, 2011 if you are looking to make the left,right middle look as though stretch to the highest element content height ie the background colour fills the total available area, when the browser is resized. Then i suggest using the outer as background for middle, and position absolute background elements behind the left and right side panels. using width 10%, top, bottom properties will cause these to fill total height of the outer element, and therefore also the side panels. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">body { margin: 0; }.outer{overflow:hidden; position:relative;background-color:#DDBBFF;}.header{background-color:#FFDDBB;}.header h1, .header h2, .header p {margin-bottom:0;margin-top:0;}.left, .right{width:10%; float:left; position:relative;}.middle {width:80%; float:left;}#leftbg, #rightbg {width:10%; position:absolute; top:0; bottom:0;}#leftbg{ left:0;background-color:#BBDDFF}#rightbg {right:0;background-color:#BBFFDD;}.footer { background: #dfb; }.footer h1, .footer h2, .footer p { margin-top: 0px; /*avoids whitespace if footer starts with an H or p*/ }</style></head><body><div class="header"><h1>Header text</h1></div><!--end header--><div class="outer"> <!--wraps all 3 columns--><div id="leftbg"></div><div id="rightbg"></div><div class="left">left left left left left left left left left left left left left left left</div><!--end left column--><div class="middle">middle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middle</div><!--end middle column--><div class="right">right right right right right right right right right right</div><!--end right column--><br class="clearfloat"></div><!--end 3 column wrapper--><div class="footerholder"> <!--IE hack--><div class="footer"><h1>Footer</h1>Prepared by Guy Cousineau <!--cheat here to ensure footer does not end with a margin-bottom element--></div><!--end footer--></div><!--end footer holder--></body></html> Link to comment Share on other sites More sharing options...
cousineaug Posted January 26, 2011 Author Share Posted January 26, 2011 if you are looking to make the left,right middle look as though stretch to the highest element content height ie the background colour fills the total available area, when the browser is resized. Then i suggest using the outer as background for middle, and position absolute background elements behind the left and right side panels. using width 10%, top, bottom properties will cause these to fill total height of the outer element, and therefore also the side panels.Thanks...It works nicely-even in IE (later versions). I had tried to enclose left and right in a container with the BG color but that did not work either. I had not though to place the BG divs absolute in the outer container.I tweaked with it a bit because my idea was to let left and right columns be different widths. I see with your solution that it is important everything adds up to 100% but that is to be expected. I am just left with a white 1-pixel bar on the right side when rounding does not add up exactly to 100%....but it is hardly noticeable.now to test with images and background images Link to comment Share on other sites More sharing options...
dsonesuk Posted January 26, 2011 Share Posted January 26, 2011 There are several ways to create a 3 col layout, the option i mostly use, is to set the left, right column widths, and float them left an right respectively, then use the width for these columns to set the left right margin of a non-floated middle element which should be placed below the left, right columns.The middle column has now, no percentage width, just margin widths to bring in from outer edge to match left and right col widths, being a block element it will stretch to the entire width of outer element automatically. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">body { margin: 0; }.outer{overflow:hidden; position:relative;background-color:#DDBBFF;width:100%;}.header{background-color:#FFDDBB;}.header h1, .header h2, .header p {margin-bottom:0;margin-top:0;}.left, .right{width:10%; position:relative;}.left{float:left;}.right{float:right;}.middle {margin: 0 11%; }#leftbg, #rightbg {width:10%; position:absolute; top:0; bottom:0;}#leftbg{ left:0;background-color:#BBDDFF}#rightbg {right:0;background-color:#BBFFDD;}.footer { background: #dfb; }.footer h1, .footer h2, .footer p { margin-top: 0px; /*avoids whitespace if footer starts with an H or p*/ }</style></head><body><div class="header"><h1>Header text</h1></div><!--end header--><div class="outer"> <!--wraps all 3 columns--><div id="leftbg"></div><div id="rightbg"></div><div class="left">left left left left left left left left left left left left left left left</div><!--end left column--><div class="right">right right right right right right right right right right</div><!--end right column--><div class="middle">middle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middlemiddle middle middle middle middle middle middle middle middle middle middle<br>middle <br>middle <br>middle <br>middle <br>middle</div><!--end middle column--></div><!--end 3 column wrapper--><div class="footerholder"> <!--IE hack--><div class="footer"><h1>Footer</h1>Prepared by Guy Cousineau <!--cheat here to ensure footer does not end with a margin-bottom element--></div><!--end footer--></div><!--end footer holder--></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.