Question

So i am placing 2 images side by side.

I am floating one left and the other right and i want clear the float with the pseudo selector ::after

The text underneath will just move in between the images.

I always have trouble with the ::after selector, it doesn’t always work for me. Any pointers or advice would be appreciated.

EDIT: Forgot to add ::after code

CSS

div#product > img:first-child {
    float: left; 
    margin-left: 55px;
    margin-bottom: 20px;
}
#product img {
    float: right; 
    margin-right: 55px;
    margin-bottom: 20px;
}
img::after {
    clear:both;
}

HTML

<div id="product">
            <img src="#" width="240" >
            <img src="#" width="240" >
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>

Thanks.

Answer 1

img:after {
    content: ' ';
    display: block;
    clear: both;
}