bionic25 Posted January 9, 2009 Share Posted January 9, 2009 Hi, I've been into web design for a while now but I have a problem that I need to fix. I'm self taught so have some odd gaps in my knowledge, and this one has plagued me for some time: i want set a background that is only applied to the centred content. To do this I'm trying to use a bg url under the "content" div. The problem is, despite content being a parent of the left hand column (which sets the minimum height of the page) and containing all the other object DIVs, the content background wont stretch to the full height to be a bg for all of the content. Please note, this works fine in IE. A FF bug only. Here's the code, Using colors to illustrate point: grey should fill the area between the header and footer but doesnt in ff. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN"> <head> <title>CSS Problem</title> <style type="text/css"> /* Gen/Def Rules */ body {font-family: arial;} a {text-decoration: none;} /* Objects */ #wrapper {width: 800px; margin: 0 auto;} #content {width: 100%; /*HERES THE PROBLEM */ background: #e3e3e3; height: auto;} #header {width: 100%; height: 100px;} #left {width: 150px; float: left; height: 500px;} #mid {width: 400px; float: left;} /* HEIGHT OF PAGE FIXED BY NAV COLUMN */ #right {width: 250px; float: left;} #footer {width: 100%; float: left; height: 75px;} /* Classes */ .red {background: red;} .green {background: green;} .blue {background: blue;} .yellow {background: yellow;} .brown {background: brown;} </style> <body> <div id="wrapper"> <div id="content"> <div id="header" class="brown">header </div> <div id="left" class="red">left </div> <div id="mid" class="green">middle </div> <div id="right" class="blue">right </div> </div> <div id="footer" class="yellow">footer </div> </div> </body> </html> I know there are javascript solutions to equal column heights and some other tricky workarounds, but I like simplicity and want to solve it pure css. Can anyone help me please?? Thanks in advance ~Bionic25 Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted January 9, 2009 Share Posted January 9, 2009 Beeing self-thought is no excuse of gabs in knowledge, these topics have been Referenced on several websites. There is a well known technique to create 3-equal-height columns, with a header and a footer, example: Equal Height Columns using Floats Similar to the layout you are trying to make, so theres little reason for me to debug your code. The layout you posted looks the same in both IE and FF for me, maybe you where trying to design with a specific version in mind? 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.