Peter Rader Peter Rader - 4 months ago 21
CSS Question

Vertical position not respecting overflowing

A inner div may bigger than the outer div. The elements after the outer div belongs to the size of the outer div only.



.ov{
overflow:visible;
}
.h100{
height:100px;
}
.h200{
height:200px;
}
.green{
border-color:green;
}
.red{
border-color:red;
}
.blue{
border-color:blue;
}
div{
border:3px solid black;
margin:10px;
}

<div class="green h100 ov">
<div class="red h200">
</div>
</div>
<div class="blue">
I am right under green, but i like to be right under red!
</div>





How to respect the overflowing size in positioning the elements after the shrinking div?

Answer

This is quite straightforward. We can just use a float and clear pair to move the blue box down. We put a floated pseudo element below the .red div and inside the .green div with

.green:after {
  content:'';
  float:left;
}

Then the blue box just needs to clear that to be below it.

.blue {
  clear:left;
}

.ov{
  overflow:visible;
}
.h100{
  height:100px;
}
.h200{
  height:200px;
}
.green{
  border-color:green;
}
.red{
  border-color:red;
}
.blue{
  border-color:blue;
}
div{
  border:3px solid black;
  margin:10px;
}
.green:after {
  content:'';
  float:left;
}
.blue {
  clear:left;
}
  
<div class="green h100 ov">
  <div class="red h200">
  </div>
</div>
<div class="blue">
    I am under green, but now right under red too!
</div>

Comments