Float Image to Left & Put Text Underneath – HTML & CSS

By Geoff Griffiths @mmatraining1980

If you want to put text underneath an image that “floats” to the left (or right), you can use this code:

<div style="margin-bottom:0;">
    <div style="float: left;">
        <img src="https://nwscdn.com/media/wysiwyg/FORZA/MenHandballSize_Chart2.png" style="width: 700px;" alt="mens & boys handball size by age"/>
    </div>
    <div style="clear: both;">
        text text text
    </div>
</div>

For personal reference, this is the code I need with the correct class for my website:

<div class="content-item" style="margin-bottom:0;">
    <div style="float: left;">
        <img src="https://nwscdn.com/media/wysiwyg/FORZA/MenHandballSize_Chart2.png" style="width: 700px;" alt="mens & boys handball size by age"/>
    </div>
    <div style="clear: both;">
        text text text
    </div>
</div>

Back to Featured Articles on