devjs11 devjs11 - 3 months ago 9
CSS Question

How to avoid text go below the icon with css?

Here is a visual example of what I am trying to achieve with CSS:

enter image description here

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
<div class="column">
<span class="ico"></span>
<span class="title">Curabitur pharetra<br/> nibh eget<br/> lorem<br/> egestas laoreet</span>
</div>

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/