Rodis Posted February 7, 2011 Share Posted February 7, 2011 Hello, I am getting crazy trying to get my div layout to stretch propperly. I have tried many solutions to have 3 floated columns stretch to an equal height. right now i have the faux column but here's the deal. When i fill up my left column with a lot of text everything works properly and all 3 columns stretch out to an equal height. example url: http://projecten.startbasis.nl/templatetest/index2.html But here comes my problem when fill out the right column with more text then the left it dissapears and none of the tables stretch to an equal hight. http://projecten.startbasis.nl/templatetest/ i cannot seem to find the problem maybe one of you can have a fresh and more experienced look as i have not managed to put my site in div layout yet :-( Hope someone can help me out here's my code. CSS: @charset "utf-8"; /* CSS Document */ body,html { margin: 0px; padding: 0px; text-align:center; } #wrapper { margin:0px auto; padding:0px; width:100%; text-align:left; } #header { width: 100%; height:172px; background-color: #0F0; background-image:url(../images/header_bg.gif); background-repeat:repeat-x; } #logo { float:left; border:solid; width:20px; height:20px; } #banner_top { width:468px; height:68px; background-color:#FFF; float:right; margin:40px; } #navbar { height:20px; background-color:#CCC; background-image:url(../images/navbar_bg.gif); background-repeat:repeat-x; font-style:oblique; font-weight:bold; margin:0; } /* 3 columns wrapper */ #column_wrapper { margin:0px auto; padding:0px; width:100%; overflow:hidden; position:relative; } #left_column { float: left; width: 200px; height:100%; min-height:100%; margin:0px auto; padding:0px; padding-bottom:60px; background-color: #FFF; background-image:url(../images/left_side_bar.png); background-repeat:repeat-y; } .left_menu { width:190px; height:100%; margin:0px auto; padding:5px; border-width:1px; border-bottom-style:dotted; border-bottom-color:#333; overflow:visible; } #content_column { float:left; height:100%; min-height:100%; margin-left:200px; margin-right:150px; overflow:hidden; padding:20px; background-color:#FFF; position:absolute; left:0; top:0; right:0; } #right_column { float: right; width: 150px; height:100%; min-height:100%; margin:0px auto; padding:0px; background-color: #0FF; background-image:url(../images/side_box_bg_r.gif); background-repeat:repeat-y; position:absolute; top:0; right:0; } #footer { clear:both; margin:0px auto; padding-left:20px; background-color: #0F0; width:100%; height:60px; background-image:url(../images/footer.gif); background-repeat:repeat-x; position:absolute; } #validators { float:left; width:auto; height:auto; } html: <!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"> <head> <title>Template test</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link href="css/layout.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo">Logo</div> <div id="banner_top">Banner</div><!--banner top --> </div><!--header --> <div id="navbar">Navbar</div> <div id="column_wrapper"> <div id="left_column"> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu and more of the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> </div><!--left_column --> <div id="content_column"> "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "Er is niemand die van pijn zelf houdt, die het zoekt en die het hebben wil, eenvoudigweg omdat het pijn is..." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut purus nec sapien vulputate aliquam eget ut nisl. Donec malesuada elementum arcu, sed congue odio tempus vel. Nam congue molestie elit non pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est arcu, fermentum et malesuada nec, tincidunt sit amet velit. Morbi id massa et nibh accumsan elementum. Aliquam eu sapien vitae sem suscipit feugiat. Donec in sem et lacus tincidunt aliquet. Proin nec vehicula quam. Morbi mattis scelerisque luctus. Etiam rutrum lorem eu lacus sagittis ornare. Suspendisse suscipit turpis eget dolor dapibus mattis. Vestibulum nisi erat, pretium non imperdiet sit amet, ornare sed eros. Suspendisse imperdiet dapibus mattis. Proin imperdiet ligula condimentum magna egestas consequat. Curabitur posuere aliquam arcu eget vehicula. Vivamus mi dolor, varius condimentum luctus at, dignissim malesuada lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in lorem ipsum. Maecenas hendrerit commodo molestie. Ut rhoncus urna a dui vestibulum quis sodales lorem volutpat. Suspendisse felis sem, sagittis in lobortis et, semper eget nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi hendrerit odio at sapien pretium non posuere arcu venenatis. Suspendisse iaculis interdum turpis sit amet malesuada. Etiam eget eros sit amet quam ornare mattis a quis tellus. </div><!--content_column --> <div id="right_column"> <div class="lipsum2"> <p> </p> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Curabitur a leo eget tortor consectetur consectetur.</li> <li>Donec nec est quis ante luctus feugiat.</li> <li>Ut ut turpis lorem, non sodales quam.</li> <li>Cras sit amet orci id mauris cursus adipiscing.</li> </ul> <p> </p> <ul> <li>Proin pretium elit ut dolor ornare a fringilla enim varius.</li> <li>Cras sit amet erat ut tellus congue consequat.</li> <li>Aliquam ac odio nec justo faucibus consequat.</li> <li>Suspendisse in nisi neque, eget aliquet tortor.</li> <li>Fusce sit amet erat ut purus ullamcorper suscipit.</li> </ul> </div> </div><!--right_column --> </div><!--column wrapper --> <div id="footer"> <div id="validators"> <a href="http://validator.w3.org/check?uri=referer"> <img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valide CSS!" /> </a> </div><!--validators --> </div><!--footer --> </div><!--wrapper --> </body><!--close body --> </html><!--close html --> Hope someone can help me out thank you advance Quote Link to comment Share on other sites More sharing options...
denno020 Posted February 8, 2011 Share Posted February 8, 2011 Have you tried floating the right column to the left too? So then it's placed directly after the two columns before it.. I'm not sure if floating it right will put it on a different display 'zone' or whatever.. Maybe try that. Denno Quote Link to comment Share on other sites More sharing options...
denno020 Posted February 8, 2011 Share Posted February 8, 2011 I just tested what I suggested and it didn't work at all :S. Quote Link to comment Share on other sites More sharing options...
Rodis Posted February 8, 2011 Author Share Posted February 8, 2011 Yes i had already tried that one out too. i have been trying a lot of things lol had some trouble to have them displayed the same in cross browser, then i thought i had it until the content in the columns changed. then i saw that everything adjusts to the left column but not to any other column. the text in the right now dissapears behind the page i had a style that didn't let it dissapear but still this same problem appeared. it's weired i have been googling and spying in other layouts i have no idea what i am doing wrong sniffff. :-( i really want this to work as i am busy on some new code for my page and i want the layout to be vallid xhtml and css. But thanks for trying anyways :-) Quote Link to comment Share on other sites More sharing options...
raknjak Posted February 8, 2011 Share Posted February 8, 2011 position: absolute + height: 100% isn't going to do what you want. http://www.positioniseverything.net/thr.col.stretch.html might this help? Quote Link to comment Share on other sites More sharing options...
denno020 Posted February 9, 2011 Share Posted February 9, 2011 as raknjak just said, position:absolute; wasn't helping at all. I just disabled that css property, and the footer moved perfectly to the bottom of the right column. The left column however, didn't drop to be the same height.. Denno Quote Link to comment Share on other sites More sharing options...
raknjak Posted February 9, 2011 Share Posted February 9, 2011 yes, I noticed that, too. The example I posted uses a background for that: browncol.gif which is repeated vertically. I don't know any other technique. What you could do is start off with that template and then insert your customizations. This is just a suggestion off course, I just noticed that when I do it like that I save huge bundles of time. Quote Link to comment Share on other sites More sharing options...
Rodis Posted February 9, 2011 Author Share Posted February 9, 2011 OK thanks im going to get this layout and start mine from ground up again hope i wil get what i want. it all looked simple when i started lol, why doesnt ie just implement all css like ff just keep one standard grrrr I still think tables are much easier hehehhe Quote Link to comment Share on other sites More sharing options...
Rodis Posted February 9, 2011 Author Share Posted February 9, 2011 Ok so i changed a few things i have a way to stretch it to the same hight http://projecten.startbasis.nl/templatetest/index1.html but when placing the right column div to its position i am back to the begining. as seen in http://projecten.startbasis.nl/templatetest/index2.html <!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"> <head> <title>Template test</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link href="css/layout.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo">Logo</div> <div id="banner_top">Banner</div><!--banner top --> </div><!--header --> <div id="navbar">Navbar</div> <div id="column_wrapper" class="column"> <div id="left_column" class="column"> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu and more of the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> </div><!--left_column --> <div id="content_column" class="column"> "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "Er is niemand die van pijn zelf houdt, die het zoekt en die het hebben wil, eenvoudigweg omdat het pijn is..." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut purus nec sapien vulputate aliquam eget ut nisl. Donec malesuada elementum arcu, sed congue odio tempus vel. Nam congue molestie elit non pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est arcu, fermentum et malesuada nec, tincidunt sit amet velit. Morbi id massa et nibh accumsan elementum. Aliquam eu sapien vitae sem suscipit feugiat. Donec in sem et lacus tincidunt aliquet. Proin nec vehicula quam. Morbi mattis scelerisque luctus. Etiam rutrum lorem eu lacus sagittis ornare. Suspendisse suscipit turpis eget dolor dapibus mattis. Vestibulum nisi erat, pretium non imperdiet sit amet, ornare sed eros. Suspendisse imperdiet dapibus mattis. Proin imperdiet ligula condimentum magna egestas consequat. Curabitur posuere aliquam arcu eget vehicula. Vivamus mi dolor, varius condimentum luctus at, dignissim malesuada lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in lorem ipsum. Maecenas hendrerit commodo molestie. Ut rhoncus urna a dui vestibulum quis sodales lorem volutpat. Suspendisse felis sem, sagittis in lobortis et, semper eget nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi hendrerit odio at sapien pretium non posuere arcu venenatis. Suspendisse iaculis interdum turpis sit amet malesuada. Etiam eget eros sit amet quam ornare mattis a quis tellus. </div><!--content_column --> <div id="right_column" class="column"> <div class="lipsum2"> <p> </p> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Curabitur a leo eget tortor consectetur consectetur.</li> <li>Donec nec est quis ante luctus feugiat.</li> <li>Ut ut turpis lorem, non sodales quam.</li> <li>Cras sit amet orci id mauris cursus adipiscing.</li> </ul> <p> </p> <ul> <li>Proin pretium elit ut dolor ornare a fringilla enim varius.</li> <li>Cras sit amet erat ut tellus congue consequat.</li> <li>Aliquam ac odio nec justo faucibus consequat.</li> <li>Suspendisse in nisi neque, eget aliquet tortor.</li> <li>Fusce sit amet erat ut purus ullamcorper suscipit.</li> </ul> </div> </div><!--right_column --> </div><!--column wrapper --> <div id="footer"> <div id="validators"> <a href="http://validator.w3.org/check?uri=referer"> <img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valide CSS!" /> </a> </div><!--validators --> </div><!--footer --> </div><!--wrapper --> </body><!--close body --> </html><!--close html --> @charset "utf-8"; /* CSS Document */ body,html { margin: 0px; padding: 0px; text-align:center; } #wrapper { text-align:left; } #header { background-image:url(../images/header_bg.gif); height:172px; width:100%; } #logo { float:left; background-image:url(../images/logo_sb.gif); background-repeat:no-repeat; height:150px; width:300px; } #banner_top { float:right; height:60px; width:468px; background-color:#CCC; } #navbar { clear:both; background-image:url(../images/navbar_bg.gif); height:20px; width:100%; } /* 3 columns wrapper */ #column_wrapper { overflow:hidden; position: relative; } /* This will make sure the columns get stretched */ #column_wrapper .column { padding-bottom: 1001em; margin-bottom: -1000em; } #left_column { float:left; background-image:url(../images/left_side_bar.png); background-repeat:repeat-y; width:200px; } .left_menu { border-bottom-style:dotted; border-bottom-width:1px; } #content_column { margin-left:200px; margin-right:151px; padding:10px; } #right_column { float:right; background-image:url(../images/side_box_bg_r.gif); background-repeat:repeat-y; width:151px; } #footer { clear:both; background-image:url(../images/footer.gif); height:60px; width:100%; } #validators { } so in the second example i have added position:absolute; top:0px; right:0px; To the right column so it gets to his position it needs to go but then still text disapears and everything is only stretched to th eleft and middle container :-( how to resolve this? Quote Link to comment Share on other sites More sharing options...
Rodis Posted February 10, 2011 Author Share Posted February 10, 2011 Got it solved :-D As stated in my last post my only problem left was that the right column was placed and floated to the right but started below the main content div. by placing the right div before the maincontent it showed up properly so this is my code @charset "utf-8"; /* CSS Document */ body,html { margin: 0px; padding: 0px; text-align:center; } .leftflt { float:left; } .rightflt { float:right; } .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; } #outer-wrapper { padding:0px; margin:0px auto; background-image:url(../images/side_box_bg_r.gif); background-repeat:repeat-y; background-position:right; width:100%; } #wrapper { padding:0px; margin:0px auto; background-image:url(../images/left_side_bar.png); background-repeat:repeat-y; text-align:left; display:inline-block; width:100%; } #header { background-image:url(../images/header_bg.gif); height:172px; width:100%; } #logo { float:left; background-image:url(../images/logo_sb.gif); background-repeat:no-repeat; height:150px; width:300px; } #banner_top { float:right; height:60px; width:468px; background-color:#CCC; } #navbar { background-image:url(../images/navbar_bg.gif); height:20px; width:100%; } /* 3 columns wrapper */ #column-wrapper { margin:0px; padding:0px; overflow:hidden; } #left-column { float:left; width:200px; z-index:1; } .left_menu { border-bottom-style:dotted; border-bottom-width:1px; } #content-column { margin:0px 151px 0px 200px; padding:10px; z-index:3; } #text { border:solid 1px; } #right-column { float:right; width:151px; z-index:2; } #lipsum2 { } #footer { clear:both; background-image:url(../images/footer.gif); height:60px; width:100%; } #validators { } and my html <!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"> <head> <title>Template test</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link href="css/layout.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <div id="outer-wrapper"> <div id="wrapper"> <div id="header"> <div id="logo">Logo</div> <div id="banner_top">Banner</div><!--banner top --> </div><!--header --> <div class="clearfloat"></div> <div id="navbar">Navbar!.. </div><!--navbar --> <div id="column-wrapper" class="column"> <div id="left-column" class="column"> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu and more of the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> </div><!--left_column --> <div id="right-column" class="column"> <div class="lipsum2"> <p>Right column </p> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Curabitur a leo eget tortor consectetur consectetur.</li> <li>Donec nec est quis ante luctus feugiat.</li> <li>Ut ut turpis lorem, non sodales quam.</li> <li>Cras sit amet orci id mauris cursus adipiscing.</li> </ul> <p> </p> <ul> <li>Proin pretium elit ut dolor ornare a fringilla enim varius.</li> <li>Cras sit amet erat ut tellus congue consequat.</li> <li>Aliquam ac odio nec justo faucibus consequat.</li> <li>Suspendisse in nisi neque, eget aliquet tortor.</li> <li>Fusce sit amet erat ut purus ullamcorper suscipit.</li> </ul> </div> </div><!--right-column --> <div id="content-column" class="column"> <div id="text"> "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "Er is niemand die van pijn zelf houdt, die het zoekt en die het hebben wil, eenvoudigweg omdat het pijn is..." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut purus nec sapien vulputate aliquam eget ut nisl. Donec malesuada elementum arcu, sed congue odio tempus vel. Nam congue molestie elit non pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est arcu, fermentum et malesuada nec, tincidunt sit amet velit. Morbi id massa et nibh accumsan elementum. Aliquam eu sapien vitae sem suscipit feugiat. Donec in sem et lacus tincidunt aliquet. Proin nec vehicula quam. Morbi mattis scelerisque luctus. Etiam rutrum lorem eu lacus sagittis ornare. Suspendisse suscipit turpis eget dolor dapibus mattis. Vestibulum nisi erat, pretium non imperdiet sit amet, ornare sed eros. Suspendisse imperdiet dapibus mattis. Proin imperdiet ligula condimentum magna egestas consequat. Curabitur posuere aliquam arcu eget vehicula. Vivamus mi dolor, varius condimentum luctus at, dignissim malesuada lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in lorem ipsum. Maecenas hendrerit commodo molestie. Ut rhoncus urna a dui vestibulum quis sodales lorem volutpat. Suspendisse felis sem, sagittis in lobortis et, semper eget nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi hendrerit odio at sapien pretium non posuere arcu venenatis. Suspendisse iaculis interdum turpis sit amet malesuada. Etiam eget eros sit amet quam ornare mattis a quis tellus. </div><!--text --> </div><!--content-column --> <div class="clearfloat"></div> </div><!--column-wrapper --> <div id="footer"> <div id="validators"> <a href="http://validator.w3.org/check?uri=referer"> <img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valide CSS!" /> </a> </div><!--validators --> </div><!--footer --> </div><!--wrapper --> </div><!--outer-wrapper --> </body><!--close body --> </html><!--close html --> http://projecten.startbasis.nl/templatetest/index1.html Thanks for the help anyways hope someone can use my solution Quote Link to comment Share on other sites More sharing options...
Rodis Posted February 10, 2011 Author Share Posted February 10, 2011 Now all i need is to find how to mark this topic solved Quote Link to comment Share on other sites More sharing options...
raknjak Posted February 14, 2011 Share Posted February 14, 2011 Now all i need is to find how to mark this topic solved As cssfreakie pointed out to me not long ago: "hehe bottom left corner green button 'solved' only shows when not in editor mode " 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.