Posted By

Meander365 on 08/10/10


Tagged

css image float label Left orphan


Versions (?)

Stop Text Wrapping Beneath A Floated Left Element


 / Published in: CSS
 

In the example .description is a label and so needs to be made a block level element. For

elements (etc) this is not needed.

The key to all this is overflow:hidden.

  1. <style>
  2. #container {width:200px;}
  3. #checkme {float:left;}
  4. .description {overflow:hidden;display:block;}
  5. </style>
  6.  
  7. <div id="container">
  8. <input type="checkbox" id="checkme"/>
  9. <label class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac nisi eu massa ultricies dapibus vel a nibh. In hac habitasse platea dictumst. Quisque placerat tortor non erat rhoncus tincidunt</label>
  10. </div>

Report this snippet  

You need to login to post a comment.