Adding content into inline-flex div pushes it down

Question

I am trying to order some divs, the idea is that I want to be able to offset them relative to each other to create asymmetrical grid.

All of it is working, until the moment content is added inside.

When a content is added into a div, that div is moved and positioned relative to the content inside it, so that the content is at the top left of the div, I am expecting the opposite behaviour, the div should not move, and the content should move relative to the div.

NOTE: I can not use an outside container to wrap all of them in it.

.column{
  width: 49%;
  height: 200px;  
  
  position: relative;
  display: inline-flex;
   
}
.column:nth-child(2n){
  top: 30px;
  right: 20px; 
}

.column:nth-child(2n - 1){
  bottom: 30px;
  left: 20px; 
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

<div class="column red">
 <p>
   This breaks it
 </p>
</div>

<div class="column green">
</div>
<div class="column blue">
</div>

<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>

<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">

no need absolute or float, add vertical-align:top to your divs — Temani Afif, Oct 04 '21 at 15:15

score -1 · Accepted Answer · answered Oct 04 '21 at 14:27

If possible you could achieve the expected behavior by wraping the content inside another div and positioning it using position: absolute

.column{
  width: 49%;
  height: 200px;  
  
  position: relative;
  display: inline-flex;
   
}
.column:nth-child(2n){
  top: 30px;
  right: 20px; 
}

.column:nth-child(2n - 1){
  bottom: 30px;
  left: 20px; 
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.column > div {
   position: absolute
}

<div class="column red">
  <div>
   <p>
     This breaks it
   </p>
  </div>
</div>

<div class="column green">
</div>
<div class="column blue">
</div>

<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>

<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">

score -1 · Answer 2 · answered Oct 04 '21 at 14:30

-1

Why don't you use the old pal float. I still use it over flex and grid often. much easier when simple layouts-

* {box-sizing:border-box;}
.column{
  width: 50%;
  height: 200px;  
  float:left;
  position:relative; 
}
.column:nth-child(2n){
  top: 30px;
  right: 20px; 
}

.column:nth-child(2n - 1){
  bottom: 30px;
  left: 20px; 
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

<div class="column red">
 <p>
   This breaks it
 </p>
</div>

<div class="column green">
</div>
<div class="column blue">
</div>

<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>

<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">

Note: I add box-sizing rule becouse I hate that width:49%

answered Oct 04 '21 at 14:30

Alvaro Menéndez

8,766
3
37
57

Thanks! What would be the difference between float and inline-flex in this case? Doesnt flex give more, well, flexibility for the inner content? – Darkbound Oct 04 '21 at 14:36
Exactly. you don't need flexibility for your layout as you already set a fixed width. No point. Also inline-flex makes no sense in your layout. You use display flex or inline-flex to a parent cointaning multiples children: https://css-tricks.com/snippets/css/a-guide-to-flexbox/... in your case... you should wrap ALL your boxes inside a display:flex parent and then use the children properties to your boxes to behave as you wish: order, flex-shrink, flex-grow, flex-basis... etc. As I said, simple layout not dinamic, better float – Alvaro Menéndez Oct 04 '21 at 14:44

Adding content into inline-flex div pushes it down

2 Answers2