0

I want to know a method of aligning images (that are done so either using float or align) to the right of header text on my website using css. We have a lot of headers with only a paragraph or so of text below them, and as headers currently want to take up their own line, it's providing difficult to insert images in an aesthetically pleasing manner in the text.

I unfortunately can't get the jsbin link working properly otherwise I'd provide it in the OP.

The only way I've found so far is to change header style to inline but this then creates a lot of other issues. I want to know whether it's possible to change this for all images via CSS, rather than fiddling with the html in every instance.

I've attached a screenshot of the issue below.

Thank you.

<p class="intro">The Broadland Rivers Catchment is relatively large at around 3,200km² and is mostly rural &#8211; over 80% is arable farmland. It includes around two thirds of Norfolk and part of north Suffolk. The largest settlements include the city of Norwich and the seaside towns of Great Yarmouth and Lowestoft, where major regeneration is planned.</p>

Rivers and broads

The four main rivers (and sub-catchments) are...

Image depicting h text not aligning to side of image

Harun Diluka Heshan
  • 1,155
  • 2
  • 18
  • 30
Tom Waterfall
  • 11
  • 2

1 Answers1

0

You can do it like this:

.img{
  float:right;
  height:100px;
  width:100px;
  background-color:#888;
}
<div class="img">image placeholder</div>
<p class="intro">The Broadland Rivers Catchment is relatively large at around 3,200km² and is mostly rural &#8211; over 80% is arable farmland. It includes around two thirds of Norfolk and part of north Suffolk. The largest settlements include the city of Norwich and the seaside towns of Great Yarmouth and Lowestoft, where major regeneration is planned.</p>
aMJay
  • 2,215
  • 6
  • 22
  • 34