devjs11 devjs11 - 1 year ago 74
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

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?

.column {

.ico {
display: inline-block;
width: 32px;
height: 32px;
margin-top: 4px;
line-height: 32px;
background-image: url("");
background-position: 0 0;
background-repeat: no-repeat;

<div class="column">
<span class="ico"></span>
<span class="title">Curabitur pharetra<br/> nibh eget<br/> lorem<br/> egestas laoreet</span>

Answer Source

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 :

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download