Überlaufelement ohne absolut positionierte Elemente darin zu schneiden

Question

In einem container Element habe ich floated Element und ein absolut positioniertes Bild, das aus container hervorstehen muss. Allerdings brauche ich container, um seine Höhe zu halten, weil es eine hat, die es vom nächsten Block darunter trennt.

Problem: containeroverflow: hidden schneidet das Bild aus, so dass es nicht daraus hervorstehen kann. Also muss ich zwischen zwei Dingen wählen, die ich unbedingt brauche: das Bild zum Vorschein und container um seine Höhe zu halten.

Wie löst man dieses 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; 
} 

Answer 1

Ist der Überlauf den Schwimmer enthalten? Wenn ja, gibt es mehrere andere Methoden.

Diese können here

Die moderne Methode ist zu finden:

.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>