Overflow element without cutting absolutely positioned elements in it

Question

In a container element I have floated element and an absolutely positioned image that needs to protrude from container. However I need container to keep its height because it has a margin-bottom that separate it from the next block below it.

Problem: container's overflow: hidden cuts the image off so it cannot protrude from it. So I have to choose between 2 things I absolutely need: the image to protrude and container to keep its height.

How to solve this dilemma?

HTML

<div class='container'>
    <div class='col1'>
        content
    </div>
    <div class='col2'>
        <img src='whatever.jpg'/>
    </div>
</div>

CSS

.container {
    overflow: hidden;
}
.col1,
.col2 {
    float: left;
    width: 50%;
}
.col2 {
    position: relative;
}
img {
    position: absolute;
    top: -100px;
    left: -100px;
}

score 1 · Accepted Answer · edited May 23 '17 at 12:16

Is the overflow to contain the floats? If so there are several other methods.

These can be found here

The modern method is:

.container:after {
  content:"";
  display:table;
  clear:both;
}

.container {
  width: 80%;
  border: 1px solid grey;
  margin: 100px auto;
  background: pink;
}
.container:after {
  content: "";
  display: table;
  clear: both;
}
.col1,
.col2 {
  float: left;
  width: 50%;
  height: 150px;
}
.col2 {
  position: relative;
  background: #c0ffee;
}
img {
  position: absolute;
  top: -100px;
  left: -100px;
}

<div class='container'>
  <div class='col1'>
    content
  </div>
  <div class='col2'>
    <img src='http://www.fillmurray.com/200/200' />
  </div>
</div>

Overflow element without cutting absolutely positioned elements in it

1 Answers1