CSS to stop text wrapping under image

Question

I have the following markup    lt li id  CN2787  gt     lt img class  fav star  src  images fav png  gt     lt span gt Text  text and more text lt  span gt   lt  li gt    I want it so that if the text wraps  it doesn t go into the  column  for the image  I know I can do it with a table  which I was doing  but this is not workable for this reason   I ve tried the following without success   li span  width  100px  margin-left  20px   fav star  width  20px    I also tried float  right   Thanks   EDIT  I want it to look like this   IMG   Text starts here and keeps going    and       wrap starts here    Not like this   IMG   Text starts here and keeps going    and  wrap starts in the space left for the image

User · Accepted Answer

Since this question is gaining lots of views and this was the accepted answer, I felt the need to add the following disclaimer:

This answer was specific to the OP's question (Which had the width set in the examples). While it works, it requires you to have a width on each of the elements, the image and the paragraph. Unless that is your requirement, I recommend using Joe Conlin's solution which is posted as another answer on this question.

The span element is an inline element, you can't change its width in CSS.

You can add the following CSS to your span so you will be able to change its width.

display: block;

Another way, which usually makes more sense, is to use a <p> element as a parent for your <span>.

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

Since <p> is a block element, you can set its width using CSS, without having to change anything.

But in both cases, since you have a block element now, you will need to float the image so that your text doesn't all go below your image.

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

P.S. Instead of float:left on the image, you can also put float:right on li p but in that case, you will also need text-align:left to realign the text correctly.

P.S.S. If you went ahead with the first solution of not adding a <p> element, your CSS should look like so:

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}

User · Answer

For those who want some background info  here s a short article explaining why overflow  hidden works  It has to do with the so-called block formatting context  This is part of W3C s spec  ie is not a hack  and is basically the region occupied by an element with a block-type flow    Every time it is applied  overflow  hidden creates a new block formatting context  But it s not the only property capable of triggering that behaviour  Quoting a presentation by Fiona Chan from Sydney Web Apps Group         float  left   right   overflow  hidden   auto   scroll   display  table-cell and any table-related values   inline-block   position  absolute   fixed

User · Answer

Very simple answer for this problem that seems to catch a lot of people    lt img src  url-to-image  gt   lt p gt Nullam id dolor id nibh ultricies vehicula ut id elit  lt  p gt       img           float  left            p           overflow  hidden          See example  http   jsfiddle net vandigroup upKGe 132

User · Answer

If you want the margin-left to work on a span element you ll need to make it display  inline-block or display block as well

User · Answer

Wrap a div around the image and the span and add the following to CSS like so   HTML           lt li id  CN2787  gt             lt div gt  lt img class  fav star  src  images fav png  gt  lt  div gt             lt div gt  lt span gt Text  text and more text lt  span gt  lt  div gt           lt  li gt    CSS               CN2787  gt  div                    display  inline-block                  vertical-align  top                              CN2787  gt  div first-of-type                   width  35                               CN2787  gt  div last-of-type                   width  65                   LESS           CN2787                gt  div                    display  inline-block                  vertical-align  top                              gt  div first-of-type                   width  35                              gt  div last-of-type                   width  65

User · Answer

setting display flexfor the text worked for me

[css] CSS to stop text wrapping under image

Since this question is gaining lots of views and this was the accepted answer, I felt the need to add the following disclaimer:

Examples related to css

Examples related to css-float

Examples related to word-wrap