tbccda
Last Updated: February 25, 2016
·
1.364K
· thasmo
Avatar

Align text next to a floated element

Sometimes it's necessary to align text next to a floated element e.g. an image element, without the text running underneath the floated element. Additionally the floated element maybe has a varying or dynamic width, which makes aligning text next to it a bit more complicated.

One simple solution is to use the CSS declaration overflow: hidden; on the element which needs to be aligned next to the floated one.

HTML

<img class="floated" alt="Floated image." />
<div class="aligned">Aligned division with text.</div>

CSS

img.floated {
    float: left;
    margin-right: 20px;
}

div.aligned {
    overflow: hidden;
}

overflow: auto; seems to work too.


Check out the snippet on jsfiddle.net

Say Thanks
Respond

2 Responses
Add your response

3471
D42a7264714dee5006b9c99d2567a320

Interesting! I wonder what makes it behave like that.

UPD. Found the answer! See The magic of “overflow: hidden”

over 1 year ago ·
17121
004e62d1bce592a6545b20a8b1bc23b1

This is a common pattern in the OOCSS circles known as a "media object".
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code

over 1 year ago ·