Hey guys, i am designing a fluid template,and I seem to have a really big problem. The fluidity applies to the header and footer, which are both set to 100%, while the main body (sidebar and content) are set to a fixed width. Now, it shows up fine in IE, but in FireFox, there is the dreaded horizontal scroll bar, and when you scroll slightly, it shows you white space. someone please help, I am really confused here. Nick Here is the css for footer and header header #header { width:100%; height: 120px; background-color: #4d4d4d; background: url('images/a1.gif') repeat-x; color: #ffffff; margin:0 auto 0 auto; } #header_inner { position: relative; width: 680px; height: 104px; margin: 0px auto; } #header_inner h1 { background: inherit; position: absolute; left: 0px; bottom: 10px; text-transform: lowercase; font-size: 39px; color: #fff; font-weight: normal; letter-spacing: -2px; } #header_inner h1 span { background: inherit; color: #DADADA; } Code (markup): footer #footer { clear: both; background: url('images/2a.gif') repeat-x; width: 100%; height:39px; margin: 0px auto; margin-bottom: 25px; margin-top: 10px; text-align: center; text-transform: lowercase; line-height:39px; } Code (markup):
Haha I feel like an idiot. The reason it kept giving me all of that white space was because i used a large negative margin to make some text invisible, but accidentally missed the (-) negative sign, so it just gave ita couple extra thousand pixels to the right. Thanks Nick