Firefox box model problems?

Nested div ignoring top margin

[basonsubatomia]

I'm having a problem in Firefox with the box model. I want to have a fixed-width wrapper div with another div positioned inside of it with a margin of 10px all around. In Firefox, the nested div doesn't seem to obey the margin on the top or bottom, only the sides.

code:

div.wrap {
 width:500px;
 margin:20px auto;
 background:#abc;
}
div.cont {
 margin:10px;
 background:#eba;
}
***
<div class="wrap">
 <div class="cont">
 Content here... blah blah blah
 </div>
</div>

This was just testing what would work (I was going about a more complicated model, but need to get this resolved first) so I can't resort to putting a top/bottom padding in div.wrap. Am I misunderstanding the box model? I thought that div.cont would be bounded/contained within div.wrap, and set its margins relative to it. I've tried putting a big top-margin value on div.cont, but instead of being relative to the top of div.cont, it just pushes div.wrap down that amount from the top of the page with div.cont sucked right up to the top of it.

[SuzyUK]

Hi basonsubatomia - Welcome to WebmasterWorld!

It's not Box Model issues it's collapsing margins.. the top/bottom margins of the cont div are collapsing (combining) with the wrapper div..

the way to get around it is to nake sure the two margins do come into contact with each other.. either add 1px top/bottom padding or 1px top/bottom border to wrapper div.. (border could be the same as background color).

so I can't resort to putting a top/bottom padding in div.wrap..

this unfortunately is one of the fixes ;)

or if there are no borders (other decoration) on the cont div could you pad it instead of margining it..

Suzy

[basonsubatomia]

Thanks for the welcome!

Ahhh, that explains things. It worked with me putting a transparent border at the top in my test case... the only problem I'm getting now in my actual code is that the divs that are nested further down the line are falling prey to the same problem, which is trickier to solve.

Through .png background images and nested divs I'm trying to make a fully expandable semi-translucent box with rounded corners... I'm adapting from this article:

http://www.sitepoint.com/article/rounded-corners-css-javascript

I might have to settle for fixed-width boxes and have a top and bottom bg image to define the boxes, or go with something other than nested divs... it's not like it's going to kill my design or anything.

[SuzyUK]

I'm trying to make a fully expandable semi-translucent box with rounded corners...

I admit to not having my thinking head on today, but just a thought... could this be easier accomplished using the "Sliding Doors" technique and rather than nesting divs stack them instead?

eg
<div><div></div></div>
<div> for content ~ padded to suit</div>
<div><div></div></div>

<div> would be given a width to suit the width of the left corner graphic which it gets as it's background.

Depending on how you're achieving your rounded corners the right "corner" graphic might need to be very wide, but <div>(which is 100% wide by default) would get it as it's background image positioned to the right of it..

all top and bottom divs need only be the height of the graphic..

as the box expands widthways <div> will "reveal" more of the extra wide graphic..

then if you've side borders you can either just use borders on the content div or if it's graphical then use a nested div scenario like above? The content div can then be padded to suit, and negative top/bottom margins would allow it to "overlap" the top bottom divs if necessary...

excuse if this doesn't make sense.. I've been reading too much code today LOL

Suzy

[basonsubatomia]

Your thinking head is bang on; I've thought of the sliding doors technique for this one as well and it's what I'm going to have to do, methinks. But if you looked at the technique that they describe in the article I linked to, it makes for much cleaner code. Structurally, it's 4 nested divs with a corner bg image in each one (positioned respectively), but the actual code is only

<div class="rounded">
 Content...
</div>

With javascript adding the nested divs client-side, making the markup quite clean. Maybe I can take care of those extra divs in the sliding doors with js as well... or maybe I could just live with a few extraneous divs.

edit:

Although I haven't tried it, I don't think you'd have to have a width set on the sliding top/bottom parts:

<div class="tl"><div class="tr"></div></div>
<div> content </div>
<div class="bl"><div class="br"></div></div>

Since the margin-collapse doesn't seem to happen with the side margins (at least in the browsers I've seen), you could have .tl have a background image of (let's say) the 10x10 corner, .tr have a background of the top right long "corner" graphic and a left-margin of 10px. Repeat on the bottom.