mercredi 15 juin 2016

Having CSS grid system and collapsing margins

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