Why Is The Image Overflowing Outside Of The Wrapper?
I'm trying to clear the float with a div after the floated image but the image is still outside of the wrapper This method to clearfix is usually effective - what am I doing wrong
Solution 1:
If you want to use an overflow method for clearing floats, then you should set overflow: auto;
on your parent element.
#wrapper {
overflow: auto;
width: 600px;
border: 2px solid black;
}
#wrapperp {
float: left;
width: 200px;
margin-left: 10px;
}
#wrapperimg {
float: right;
}
<divid="wrapper"><p>
This image is taller than the element containing it, and it's floated, so it's overflowing outside of its container!
</p><imgsrc="picture.jpg" /></div>
Solution 2:
So you will clear the floats before and after.
You gotta apply
overflow:auto
to #wrapperwrapper{ width:600px; border: 2px solid black; overflow: auto; }
Solution 3:
#wrapper {
margin: 10px;
border: 2px solid #000;
background: #A00;
color: #FFF;
height:auto;
overflow:auto;
width:600px;
}
#wrapperp{
float:left;
width:200px;
margin-left:10px;
}
#img{
float:right;
height:auto;
}
<divid="wrapper"><p>
This image is taller than the element containing it, and it's floated, so it's overflowing outside of its container!
</p><divid="img"><imgsrc="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall+copy.jpg"style="margin: 10px 10px; "/></div></div>
Post a Comment for "Why Is The Image Overflowing Outside Of The Wrapper?"