Stop Text Wrapping Beneath A Floated Left Element

/ Published in: CSS
Save to your folder(s)

In the example .description is a label and so needs to be made a block level element. For <p> elements (etc) this is not needed.

The key to all this is overflow:hidden.

Copy this code and paste it in your HTML
  1. <style>
  2. #container {width:200px;}
  3. #checkme {float:left;}
  4. .description {overflow:hidden;display:block;}
  5. </style>
  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


RSS Icon Subscribe to comments

You need to login to post a comment.