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 · Answer

Wrap a div around the image and the span and add the following to CSS like so:

HTML

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

CSS

            #CN2787 > div { 
                display: inline-block;
                vertical-align: top;
            }

            #CN2787 > div:first-of-type {
                width: 35%;
            }

            #CN2787 > div:last-of-type {
                width: 65%;
            }

LESS

        #CN2787 {
            > div { 
                display: inline-block;
                vertical-align: top;
            }

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }

User · Answer

setting display flexfor the text worked for me

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

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  lt p gt  element as a parent for your  lt span gt     lt li id  CN2787  gt     lt img class  fav star  src  images fav png  gt     lt p gt        lt span gt Text  text and more text lt  span gt     lt  p gt   lt  li gt    Since  lt p gt  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  lt p gt  element  your CSS should look like so   li span width  100px  margin-left  20px display block   fav star  width  20px float left

[css] CSS to stop text wrapping under image

Examples related to css

Examples related to css-float

Examples related to word-wrap