user2991837 user2991837 - 22 days ago 4
CSS Question

Floated image and text to the right

I'm a newbie to CSS to please forgive me, I've spent ages on this:

I have an image which I want floated left with a width of 40% and margin-right of 40px. I then have a div with a caption in it that I want to position to the right of the image. This works on my Mac, but is it cross browser compatible?


<img ... >
<div class="right_column">some text</div>


img { float:left; width:40%; margin-right:40px; }

The text in the right_column div sits to the right of the image, with the margin between the two. It seems too easy to be true?


You can use the property display: inline-block with the image and div.right_column to get the same result, like this:


  display: inline-block;
  width: 40%;
  margin-right: 40px;
  display: inline-block;

here the fiddle: