Hey guys! I'm designing a website, and here are a few problems that I cannot resolve. http://www.imagine-nation.net/v2/2/ 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script language="javascript"> function homeactivate() { document.images["home"].src = "images/homemouseon.jpg"; } function homedeactivate() { document.images["home"].src="images/homemouseoff.jpg"; } function membersactivate() { document.images["members"].src="images/memberson.jpg"; } function membersdeactivate() { document.images["members"].src="images/membersoff.jpg"; } function salesactivate() { document.images["sales"].src="images/saleson.jpg"; } function salesdeactivate() { document.images["sales"].src="images/salesoff.jpg"; } </script> </head> <body> <div id="logo"><div align="center"><a href="javascript:void(0)"><img src="images/logo.jpg" alt="logo image" width="400" height="154" /></a> </div></div> <div id="menu"> <div align="center"><a href="javascript:void(0)" onmouseover="homeactivate()" onmouseout="homedeactivate()"><img src="images/homemouseoff.jpg" alt="home button" border="0px" height="30" width="100" name="home" /></a> <a href="javascript:void(0)" onmouseover="membersactivate()" onmouseout="membersdeactivate()"><img src="images/membersoff.jpg" alt="members area" border="0" height="30" width="100" name="members" /></a> <a href="javascript:void(0)" onmouseover="salesactivate()" onmouseout="salesdeactivate()"><img src="images/salesoff.jpg" alt="sales page" border="0" height="30" width="100" name="sales" /></a> </div> </div> <div id="maincontainer"> <div id="left"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum pulvinar erat eget ultrices. Cras auctor auctor tellus vel porttitor. Vestibulum vel leo tellus. Praesent tincidunt suscipit risus vestibulum bibendum. Quisque mattis suscipit convallis. Praesent imperdiet massa eget metus dignissim volutpat viverra sapien fermentum. Vivamus volutpat nibh vitae massa porta eu varius turpis luctus. Maecenas tempor massa eget elit sodales in tempor sem hendrerit. Donec eros lacus, consequat a ullamcorper vitae, elementum sed lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Maecenas eget justo ac leo consequat porta. Mauris nunc dolor, rhoncus eu tempor non, vulputate vitae nisi. Pellentesque placerat porta erat pretium viverra. Donec sollicitudin turpis quis lacus feugiat placerat. Pellentesque pellentesque blandit sapien, ac accumsan quam cursus quis. Aliquam placerat augue et dui ornare vel eleifend orci egestas.</p> <p>Sed sagittis quam eget nibh dapibus lobortis. Suspendisse id nunc neque, et rhoncus est. Morbi laoreet luctus lobortis. Integer eleifend, ante a pretium imperdiet, dui lectus scelerisque nisl, vitae viverra dolor tortor ac lorem. Donec sed rutrum lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam vel neque ac est aliquam vulputate eu in orci. Aliquam augue arcu, sollicitudin non vehicula a, interdum at sem. Etiam cursus risus ac nisi scelerisque luctus. Etiam tristique convallis elit, quis vestibulum nunc congue eget. Sed ut ante nec elit interdum porttitor. </p> </div> <div id="center"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum pulvinar erat eget ultrices. Cras auctor auctor tellus vel porttitor. Vestibulum vel leo tellus. Praesent tincidunt suscipit risus vestibulum bibendum. Quisque mattis suscipit convallis. Praesent imperdiet massa eget metus dignissim volutpat viverra sapien fermentum. Vivamus volutpat nibh vitae massa porta eu varius turpis luctus. Maecenas tempor massa eget elit sodales in tempor sem hendrerit. Donec eros lacus, consequat a ullamcorper vitae, elementum sed lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Maecenas eget justo ac leo consequat porta. Mauris nunc dolor, rhoncus eu tempor non, vulputate vitae nisi. Pellentesque placerat porta erat pretium viverra. Donec sollicitudin turpis quis lacus feugiat placerat. Pellentesque pellentesque blandit sapien, ac accumsan quam cursus quis. Aliquam placerat augue et dui ornare vel eleifend orci egestas.</p> <p>Sed sagittis quam eget nibh dapibus lobortis. Suspendisse id nunc neque, et rhoncus est. Morbi laoreet luctus lobortis. Integer eleifend, ante a pretium imperdiet, dui lectus scelerisque nisl, vitae viverra dolor tortor ac lorem. Donec sed rutrum lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam vel neque ac est aliquam vulputate eu in orci. Aliquam augue arcu, sollicitudin non vehicula a, interdum at sem. Etiam cursus risus ac nisi scelerisque luctus. Etiam tristique convallis elit, quis vestibulum nunc congue eget. Sed ut ante nec elit interdum porttitor. </p></div> <div id="right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum pulvinar erat eget ultrices. Cras auctor auctor tellus vel porttitor. Vestibulum vel leo tellus. Praesent tincidunt suscipit risus vestibulum bibendum. Quisque mattis suscipit convallis. Praesent imperdiet massa eget metus dignissim volutpat viverra sapien fermentum. Vivamus volutpat nibh vitae massa porta eu varius turpis luctus. Maecenas tempor massa eget elit sodales in tempor sem hendrerit. Donec eros lacus, consequat a ullamcorper vitae, elementum sed lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Maecenas eget justo ac leo consequat porta. Mauris nunc dolor, rhoncus eu tempor non, vulputate vitae nisi. Pellentesque placerat porta erat pretium viverra. Donec sollicitudin turpis quis lacus feugiat placerat. Pellentesque pellentesque blandit sapien, ac accumsan quam cursus quis. Aliquam placerat augue et dui ornare vel eleifend orci egestas.</p> <p>Sed sagittis quam eget nibh dapibus lobortis. Suspendisse id nunc neque, et rhoncus est. Morbi laoreet luctus lobortis. Integer eleifend, ante a pretium imperdiet, dui lectus scelerisque nisl, vitae viverra dolor tortor ac lorem. Donec sed rutrum lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam vel neque ac est aliquam vulputate eu in orci. Aliquam augue arcu, sollicitudin non vehicula a, interdum at sem. Etiam cursus risus ac nisi scelerisque luctus. Etiam tristique convallis elit, quis vestibulum nunc congue eget. Sed ut ante nec elit interdum porttitor. </p> </div> </div> </body> </html> Code (markup): CSS: @charset "utf-8"; /* CSS Document */ body { background-color:#313131; background-image:url(../images/header.jpg); background-repeat:repeat-x; } #logo { position:absolute; top:0px; left:0px; right:0px; } #menu { background-image:url(../images/menubg.jpg); background-repeat:repeat-x; position:absolute; top: 127px;right:10px;left:10px;height:30px; border-style:solid; border-width:thin; -moz-border-radius:10px 5px 10px 0px; -webkit-border-radius:10px 10px 0px 0px; border-radius:10px 10px 0px 0px; border-color:#00d2ff #00d2ff #313131 #00d2ff; padding-left: 20px; padding-right: 20px; /*box-shadow: 0px -1px 10px; -moz-box-shadow: 0px -6px 10px; -webkit-box-shadow: 0px -1px 10px;*/ } /* The -webkit and -moz prefixes are for Safari, Opera, and FF2+ support. Do not remove. */ #maincontainer { height:100%; background-color:#272425; position:absolute; top:157px; left:10px; right:10px; border-style:solid; border-width:thin; border-color:#313131 #00d2ff #00d2ff #00d2ff; border-radius: 0px 0px 10px 10px; -moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius: 0px 0px 10px 10px; padding-left:10px; padding-right:10px; padding-bottom:30px; color:#00d2ff; /*box-shadow: 0px 0px 10px; -moz-box-shadow: 0px 0px 10px; -webkit-box-shadow: 0px 0px 10px;*/ } /* No Float Value Used. Do not touch positioning. Left column inside main container. */ #left { position:absolute; left:10px; top:20px; width:250px; float:left; text-align:justify; height:auto; } /* Center column inside main container */ #center { position:absolute; left:290px; right:310px; width:400px; top:20px; text-align:justify; height:auto; } /* Right column inside main container */ #right { position:absolute; right:10px; width:250px; top:20px; float:right; text-align:justify; height:auto; } .footer { position:absolute;bottom:0px;left:0px;right:0px; background-image:url(../images/footer.jpg); } Code (markup): Okay, as for my problem you will notice from the link above that the maincontainer div is not stretching to fit the text columns as it should, and the way I know to fix this problem is to set #maincontainer height to 100% and set the columns heights to auto, however this isn't working.
skip setting heights on any of the containers, skip absolute positioning at least on the text column containers and float them instead, don't forget to clear them inside the maincontainer. Ever thought of checking out the 960gs css grid?
Good point. 960 is lil bit narrow tho. From what I've heard it can be easily transformed into a 1080 px, switching from 60px grid to 70 px grid, using Gantry Framework (both keep 10px left and right margins tho). I manage to drop that to half on a 960 grid.
You can keep the height settings to keep up the general aspect . Just use "min-height" then a non percentage based value .