I think this is a tough one.
I use a grid system utilizing float:left. I could rewrite it with display:inline-block, but that would not change a thing.
Let's say we have two columns:
<div class="row">
<div class="column">
<!-- some content here -->
</div>
<div class="column">
<!-- some content here -->
</div>
</div>
If I put a block element with margin-top in it (like <h1>) I get non collapsing margins to the content before. This is normal as it is always as such with floated elements (or display: inline-block).
But I want to have collapsing margins. I tried a lot to make it work, but it seems that every CSS that will put two elements next to each other will destroy collapsing margins to the contents above.
I know, I could use CSS to get the first-child of an element to get rid of the margin-top. But in this case it won't apply, because the content is built with a CMS and there could be an arbitrary level of element depth till I get to the element.
Is there any way of doing this without JavaScript?
Fiddle: http://jsfiddle.net/HerrSerker/ZSV3D/
You can see, that the margin-top of h1 and margin-bottom of .header do not collapse. This is by means of float:left of .column.
.header {
font-size: 24px;
background: rgba(0,255,0,0.1);
}
h1 {
background: silver;
margin-bottom: 50px;
font-size: 28px;
}
.column {
float: left;
width: 50%;
background: rgba(255,0,0,0.1);
}
h2 {
background: gold;
margin-top: 50px;
font-size: 24px;
}<div class="header"><h1><h1>Headerh1</h1></h1></div>
<div class="row">
<div class="column"><h2><h2>Col 1, float: left</h2></h2></div>
<div class="column"><h2><h2>Col 2, float: left</h2></h2></div>
</div>
<p>I want a 50 pixel margin between Header and the Cols, but the two margins don't collapse and I end up with 50 + = 100 pixel gap. If it would work, you wouldn't see the light red above col1 and col2</p>Edit
I could of course use some successor operator in CSS like header + .row .column h1 { margin-top: 0;}. But that's not what I want. What I want is a way of settings element next to each other which work with margin-collapse of contained elements.
Edit2
So the situation and the question once again in short.
The problem is rather simple. I have some CSS code, which allows me to set two or more divs next to each other like float:left; width:50%. Inside of these divs are elements like h2 which have a top-margin. If inside a div before there is a h1 with bottom-margin. This situation does not allow the margins of h1 and h2 to collapse. Is there any chance of putting elements next to each other with margin-collapse and without setting the margin to zero manually?
Or otherwise. Is there any chance of settings elements next to each other without creating a new block formatting context?
Edit3:
-------------------------------------------------------------
What it is:
┌─ .header ─────────────────┐
│ ┌─ h1 ──────────────────┐ │
│ │ │ │
│ └───────────────────────┘ │ ┄┄┄┬┄┄┄
└───────────────────────────┘ ┆
┆ margin-bottom of h1
┆
┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┼┄┄┄
┆
┆ margin-top of h2
┌─ .row ────────────────────┐ ┆ not collapsing
│ ┌─ .col ───┐ ┌─ .col ───┐ │ ┄┄┄┴┄┄┄
│ │ ┌─ h2 ─┐ │ │ ┌─ h2 ─┐ │ │
│ │ └──────┘ │ │ └──────┘ │ │
│ └──────────┘ └──────────┘ │
└───────────────────────────┘
-------------------------------------------------------------
What I want:
┌─ .header ─────────────────┐
│ ┌─ h1 ──────────────────┐ │
│ │ │ │
│ └───────────────────────┘ │ ┄┄┄┬┄┄┄
└───────────────────────────┘ ┆ margin-bottom of h1
┆ and margin-top of h2
┌─ .row ────────────────────┐ ┆ collapsing
│ ┌─ .col ───┐ ┌─ .col ───┐ │ ┆
│ │ ┌─ h2 ─┐ │ │ ┌─ h2 ─┐ │ │ ┄┄┄┴┄┄┄
│ │ └──────┘ │ │ └──────┘ │ │
│ └──────────┘ └──────────┘ │
└───────────────────────────┘
-------------------------------------------------------------
