user2991837 user2991837 - 2 months ago 6
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?

HTML

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


CSS

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?

Answer

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

CSS:

img{
  display: inline-block;
  width: 40%;
  margin-right: 40px;
}
.right_column{
  display: inline-block;
}

here the fiddle: https://fiddle.jshell.net/56ap36q8/

Regards!