I know this is all over the web but I’ve spent hours and can’t get it to work. I really need help! The issue only in Firefox. I am doing a browser detect and I point to two separate .css files so as not to confuse the issues. Like I said, IE - great but the Firefox will not stretch my container to contain 100% of my text. It only shows you 100% of the screen. I am using someone else’s design and I am supposed to convert it to pure css. Cannot use any tables. Any ideas??
Here is my firefox css code:
body {
text-align: center; /* center things in pre-IE6 */
background-image: url(../images/bg_gradient_wallpaper.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
}
#container {
margin: -10 auto; padding: 0px;
width: 1024px;
text-align: left;
border: 3px solid #CC9933;
background-color: #FFF;
height: 100%;
}
#contentmain {
width: 857px;
float: right;
border: 1px solid pink;
background-color: white;
}
#contentleft {
margin: 0 auto; padding:29px 0px 10px 30px;
width: 320px;
float: left;
border: 1px solid black;
}
#contentright {
margin: 0 auto; padding:20px 52px 10px 0px;
width: 375px;
float: right;
border: 1px solid red;
}
.clearfooter {
height: 200px;
clear: both;
}
#clearfooter {
height: 20px;
clear: both;
}
#footer {
height: 20px;
position: relative;
color: #00467f;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
here is a link to my HTML: