footer won't clear floated nested divs
I'm putting a page together with some boxes spaced random-ishly about my page.
I'm using relative positioning and (hence) some nested div's to keep the layout fluid.
I'm sure the answer to this is obvious, but I'm still stuck. Can someone please help me get the footer to clear the other floated divs? It wants to move to the top of the page (just under the header) If I float it left, it moves to the bottom, but doesn't clear the last box.
ALso, I can live with this one if I have to, but I have 2 nested, overlapping boxes near the top of the page. FF and Opera are rendering it fine, but IE is making the first box too wide (it thinks it has to include the content and padding of the nested descendant box in it's 50% width) THis means that when the screen is resized, (made smaller) there isn't room for it, so it bumps it down below the last box. Is there a way around this? DO I have to hack it or something? (sigh!)
Again, any comments, suggestions would be GREATLY appreciated.
I'm bound and determined to figure this out, and to learn how to do this stuff the right way.
We'd really need to see the page and the source code. Preferable just post a link for us.
There seems to be some confusion. Relative position is probably not what you want to use here. You may have miss understood what relative positioning means. Then you say floated divs? Are the floated or positioned, they are not the same thing.
As for the box size. Typical box model error. Validate your source code and the bug will go away. It's caused by IE runing in quirks mode rather than standard mode. The two modes use different box modesl (how the padding, width and margins add up.) If you get IE running in Standards mode (by making your page valid to the standards) then it will sort it's self out.