• 0

Nested DIV issue


Question

I have a DIV within a DIV, and have appropriate margin set on the ?top? of the nested div so that it is sitting on the floor of the parent DIV?. or so I think!

My problem is, when I preview this in a browser or liveview, it kind of inverts my nested DIV, i.e. the nested DIV becomes pinned to the ceiling of the parent DIV, and the margin appears to be pushing it up from the bottom!

You can see that the parent DIV, ?maincontent? has a nested DIV called ?maincontent_frost?. I applied 199px of padding so it would be pushed down to the floor of its parent Div, ?maincontent? it all looks good in Dreamweaver?s Design view, but as i mentioned, when you preview it in browser, it gets stuck to the top of ?maincontent?

What am i doing wrong?

Test site here http://blu-berri.com/dump/test/

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

Add this to your #maincontent_frost style for a quick fix.

float: left;

Why didn't i think of that! cheers.. but out of interest, why does it do that?

Link to comment
Share on other sites

  • 0

Why? It works as it is.

Because containers don't clear floats automatically. That and the elements that contain any floated items don?t take those floated items into account when the height is calculated.

So then the OP will end up coming back to Neowin with the aforementioned problem.

Any time you utilize a float, clear it.

Link to comment
Share on other sites

  • 0

Because containers don't clear floats automatically. That and the elements that contain any floated items don't take those floated items into account when the height is calculated.

So then the OP will end up coming back to Neowin with the aforementioned problem.

Any time you utilize a float, clear it.

I don't get that logic. He has nothing following on the page, why would he clear it? Do you clear footers?

Not to mention that this particular layout has no use for it, at all. His parent element has a defined height, so anything he adds after that would display at the correct offset.

Link to comment
Share on other sites

  • 0

But why? He has nothing else on the page and if he did, the defined height on the parent already does what the clear would be meant to do. It's like when I see people declare display: block; on a DIV element. It doesn't do anything, it just makes your code bloated and significantly more time consuming to maintain.

Link to comment
Share on other sites

  • 0

Cupcakes is right... if you ever choose to expand your site/page and add stuff below it... it will display it properly...

Having the height set means nothing... IE6/7/8 see that as min-height, not as min-height & max-height being the same # (like every other browser). And considering IE users will be 50% of your visitors... this is an issue.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.