Forum Moderators: not2easy
For some odd reason, the color of the footer is covering the whole page. I have placed a 4px black border around the footer and its covering the whole page. So for some reason my footer is not under the container div as it should be. In IE, of course, It shows up as it should, In ff it shows as described above.
I'm using the xhtml transitional dtd, and my xhtml validates and so does my css. I'm not sure what is going on. Am I missing something here?
argh!
<body>
<div id="container"><!--open container div-->
<div id="head"><!--open header div-->
<!--close header div--></div>
<div id="hdnav"><!--open hdnav div-->
<ul>
<li><a href="link">link</a></li>
<li><a href="link">link</a></li>
<li><a href="link">link</a></li>
<li><a href="link">link</a></li>
<li><a href="link">link</a></li>
<li><a href="link">link</a></li>
<li><a href="link">link</a></li>
</ul>
<!--close hdNav div--></div>
<div id="container2"><!--open second container to hold 3 divs-->
<div id="left"><!--open left container-->
<!--close left container--></div>
<div id="center"><!--open center container-->
<!--close center container--></div>
<div id="right"><!--open right container-->
<!--close right container--></div>
<!--close 3 container2 div--></div>
<!--close container div--></div>
<div id="clear"><!--open close and close clearing div-->
</div>
<div id="footer"><!--open footer div-->
<!--end footer div--></div>
</body>
</html>
I did not place float left on the footer? This is what kept it from working?
totally fluid layout.
I did not place float left on the footer? This is what kept it from working?
If I had to guess, i would say that you probably floated your container div in order to enclose floats inside of it, yes?
If so, try thinking about it like this. Here's the basic code for the elements in question (we can ignore what is inside of the container and just deal with it alone, for now)...
<div id="container">
</div>
<div id="footer">
</div>
Now just for mental kicks, replace "container" with "sidebar" and "footer" with "content"...
<div id="sidebar">
</div>
<div id="content">
</div>
That looks familiar, yes? A basic layout where you would float the sidebar (at a small portion of the total page width) to the left and leave the content div unfloated so that it's line-boxes would wrap around the floated sidebar. Basic two column stuff. Since the non-floated element actually goes beneath the float, you would expect it's background to cover the whole layout, provided the sidebar didn't have a background of it's own, right?
Now put your element names back in and you can see what is in all liklihood happening. Since the container is floated and the footer is not, the browser assumes you mean for the container to float over the footer, in other words, the top of the footer is equal to the top of the container div, in the same way that the top of a "content" div is at the same level as the top of a "sidebar" div. Since the footer is actually going underneath the container, it's background goes under it, too.
By adding float:left, you force the footer beneath the container because there isn't enough room in the layout for them to sit side by side while floating. An equivalent solution would be to add a clear property to the footer, which would also force it below the #container and take it's background with it.
Of course, I may be off base here. If it turns out you didn't float the #container, then obviously my explanation doesn't apply and I can, once again, be safely ignored. ;)
cEM
Ahhh, so simple! And totally makes sense. Since I did not specify the float, that makes sense. Hmmm browser was smarter then i was there for a few ;) It was actually doing as I had specified, even though that wasn't what I had wished to specify.
I can, once again, be safely ignored.
Ah, never ignore your postings, they are too good to ignore! ;)
And yes the wrapper container is floated as is all divs within it.
I was a bit confused with it as I did have a clearing div within the wrapper/container div. I guess though that this doesn't work if you don't float the footer?
Thanks so much for the explaination!
I hope you had a wonderful christmas CEM!
as I did have a clearing div within the wrapper/container div...I guess though that this doesn't work if you don't float the footer?
To quote:
The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.
As far as I know, only IE5/Mac ignores this 'rule.'
It was actually the float on the footer itself that solved the problem. Since the combined width of the container and the footer equal more than the width of the layout, the second float (footer) moves down until there is room enough for it to render (i.e., below the container).
I hope you had a wonderful christmas CEM!
cEM
[edited by: createErrorMsg at 4:34 pm (utc) on Dec. 29, 2004]
I did, and same to you :)
Yes, thank you I did, it was one of the best.
