ansaurus

Question

Answer 1

+2 A:

well you need something in between to "break" the collapsing.

my first thought was to use a div with display:none set in between, but that doesn't seem to work.

so I tried:

<div style="overflow: hidden; height: 0px; width: 0px;">.</div>

which seems to do the job nicely (at least in firefox, don't have internet explorer installed here to test it...)

<html>
    <body>
        <div style="margin: 100px;">.</div>
        <div style="overflow: hidden; height: 0px; width: 0px;">.</div>
        <div style="margin: 100px;">.</div>
    </body>
</html>

Zenon 2009-12-01 21:07:26

Works for me in Firefox, Chrome, Opera and IE6 on Linux. Good job, I was about to post that it was impossible...

DisgruntledGoat 2009-12-01 21:16:06

Seems to work in IE6 as well. It's astounding that you need extra markup to acomplish this though.

Ilia Jerebtsov 2009-12-01 21:20:30

Actually, close, but not quite there. The margins are still collapsing, they're just not collapsing against eachother. Consider: <div style="background-color: red;"> <div style="margin: 100px;">.</div> </div> <div style="overflow: hidden; height: 0px; width: 0px;">.</div> <div style="background-color: blue"> <div style="margin: 100px;">.</div> </div>

Ilia Jerebtsov 2009-12-01 21:25:14

well, id you put the overflow:hidden div inside the background divs, it still works (though the markup is getting uglier and uglier this way...).like <background div><overflow div/><margin div/><overflow div/></div>there has to be a more elegant solution to this. Though, knowing how webdesign is, there probably isnt :)

Zenon 2009-12-01 21:31:59

Answer 2

+2 A:

Eric Meyer refers to your exact point in his article Uncollapsing margins.

See the text of the article after Figure 6 for his approach. He mentions that 1px padding/border is typically the way to go, but offers a pretty simple solution for instances where there's no flexibility in adding that additional pixel.

It involves manually overriding margins on each element though, so I'm not sure if it will work for your particular case.

Mark Hurd 2009-12-01 21:40:53

ansaurus

tags:

views:

answers:

How do I uncollapse a margin?

related questions