Footer breaking nested div's

Forum Moderators: not2easy

Message Too Old, No Replies

Footer breaking nested div's

bhays

11:09 pm on May 3, 2004 (gmt 0)

I've been searching posts for about the last hour, and haven't found the right solution yet. Basically, I have a container div, with nested divs holding menu, data, and a footer.

However, with the footer, I cannot get it do display within the container div correctly. The code below works fine on its own, however when added to the whole page, the footer is outside the container. Removing the float's will bring the footer inside the container, but they will not be aligned anymore.

Is there something I should add/change to my container div to allow for the float's?

<html>
<head>
<style type="text/css">
#footer {position:relative;display:block;}
#address {float:left;text-align: left;}
#phone {float:right;text-align:right;}
</style>
</head>
<body>
<div id="footer">
<div id="address">Address goes here</div>
<div id="phone">Phone over here</div>
</div>
</body>
</html>

Thanks...

crashomon

3:54 pm on May 4, 2004 (gmt 0)

Hi, I don't see the container DIV showing in this mockup, perhaps you just have the footer in the wrong location.

Please show more detail about what you have and what is NOT working for you.

thanks,

Patrick Elward

DrDoc

4:07 pm on May 4, 2004 (gmt 0)

You have actually already answered the question yourself. The "problem" is the floating boxes. For more information, take a look at what W3C have to say about it:
[w3.org...] (section 9.5)
[w3.org...] (section 10.6.2)