How to avoid text go below the icon with css?

Question

Here is a visual example of what I am trying to achieve with CSS: Also live example at http://jsfiddle.net/En4yC/3/ The problem is that I need the text to be aligned next to an icon but without giving it a strict width because the container column is liquid. Do you think this is possible? Maybe some negative margin would work with floating? ``` //CSS .column { width:33.3333%; } .ico { display: inline-block; float:left; width: 32px; height: 32px; margin-top: 4px; margin-right:10px; line-height: 32px; background-image: url("http://fakeimg.pl/32x32/"); background-position: 0 0; background-repeat: no-repeat; } //HTML

Curabitur pharetra
nibh eget
lorem
egestas laoreet

```

Accepted Answer

Add this to your CSS:

```
.title { display: block; overflow: hidden; }
```

This way the text will be next to the image if there is an image, and if there isn't it will stick to the container's left border. I removed the br tags to show that it works without them too :

http://jsfiddle.net/En4yC/9/

How to avoid text go below the icon with css?

Solution

Problem