CSS to stop text wrapping under image

Question

I have the following markup:

  
  Text, text and more text         


        

Answer 1

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