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 two 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 {
background: silver;
height: 50px;
margin-bottom: 50px;
font-size: 24px;
}
.column {
float: left;
width: 50%;
}
h1 {
background: gold;
margin-top: 50px;
font-size: 24px;
}
<div class="header">Header is normal div</div>
<div class="row">
<div class="column"><h1>Col 1 is float: left</h1></div>
<div class="column"><h1>Col 2 is float: left</h1></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.</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.
Aucun commentaire:
Enregistrer un commentaire