ansaurus

Question

CSS positioning (margin / padding) with markup constraint

Answer 1

+2 A:

#parentdiv div {
    margin-top: 20px;
}

#parentdiv div:first-child {
    margin-top: 0;
}

should do it. Alternatively, you could try

#parentdiv div + div {
    margin-top: 20px;
}

Which solution to use depends on browers’ support of either the :first-child pseudo-class, or the + adjacent selector. Any modern browser (thus, discounting IE6) should support both.

igor 2010-08-13 13:42:37

Note: :first-child pseudo-class and adjacent selector will not work on IE6

Yi Jiang 2010-08-13 13:46:20

Thanks, Yi Jiang, for pointing this out. I guess there is no pure CSS solution to this problem for IE6, without resorting to extra markup.

igor 2010-08-13 13:49:27

unfortunately it needs to work in IE6 as well

Jaap 2010-08-13 13:51:46

http://iedeathmarch.org/2010/01/microsoft/ even microsoft doesn't support it more

Sotiris 2010-08-13 13:51:51

If IE6 is an absolute must, I recommend using some small javascript that dynamically adds `class="first_child"` to the first child `div`, and adding the appropriate selector `#parentdiv div.first_child` to the second CSS rule of my first solution.

igor 2010-08-13 13:59:48

Answer 2

A:

you could insert another div inbetween them and make its height 20px? or is putting the first inner div into a new div and then making the new divs bottom margin 20px an acceptable solution?

pootzko 2010-08-13 13:45:04

Answer 3

A:

As others have already stated, you cannot use a pure CSS approach that will work in IE6. However, why not use a minified, basic jQuery framework - without the ui it will be tiny - and then you can call the first child and apply the margin to that:

$("#parentdiv:first").css({ marginTop: 0 })

That way you'd have already applied the margin-top:20px; in your css, now you're removing it from the first child only. I know you said you did not want a javascript approach, but you're not left with much choice, unless you're willing to re-engineer ie6 and resurrect him for us?

Hope this helps someone somewhere.

webfac 2010-08-13 14:07:41

Answer 4

A:

Two divs sitting below each other? Do you mean they're stacked vertically, one on top of the other? Margin-top would do it as long as you don't have padding on the parent div.

Try this example.

<html>
<head>
<style>
div.parent {
    background-color: #AAA;
}
div.child {
    background-color: #CCC;
    margin-top: 20px;
}
</style>
</head>
<body>
<div class="parent">
    <div class="child">&nbsp;</div>
    <div class="child">&nbsp;</div>
</div>
</body>
</html>

You'll notice that as long as there's nothing inside the parent above the first child its margins won't extend the parent div.

If they're side-by-side and floating that's a different story, margin-left doesn't work the same as margin-top. You might be able to use margin-right on both divs but fix the width of the parent and set overflow to hidden in order to chop off the extended margin - but I'm not sure about compatibility on that kind of thing.

Are you absolutely certain you've got no way to distinguish the two divs? Finding a way around that constraint might do a lot to help you.

Andrew 2010-08-13 14:09:30

ansaurus

tags:

views:

answers:

CSS positioning (margin / padding) with markup constraint

related questions