Collapsing margins

Tests for collapsing margins with negative positioning.

by Bruno G.

HTML

<div id="container">
    <div class="extra">Outside Test</div>
    <div class="square"></div>
    <div class="square">Margins collapsed</div>
    <div class="square"></div>
</div>

<br><br><br>
<div id="container" style="overflow:auto">
    <div class="extra">Outside Test</div>
    <div class="square"></div>
    <div class="square">Overflow: Auto</div>
    <div class="square"></div>
</div>

<br><br><br>
<div id="container" style="float:left">
    <div class="extra">Outside Test</div>
    <div class="square"></div>
    <div class="square">Float: Left</div>
    <div class="square"></div>
</div>

CSS

#container {
    background: #ccc;
    width: 200px;
    position: relative;
}
.square {
    margin: 10px;
    height: 20px;
    background: #f7f
}
.extra {
  position:absolute;
  right:3px;
  bottom:-20px;
}