How to align and float images on your website

A combination of HTML and CSS can be used to accurately and flexibly display images on your website. With a little knowledge and experimentation, you can choose to align images to text (or other page elements) or float the image, which allows text to wrap around – as you’d see in a newspaper or magazine.

Before we dive into the code, let’s briefly define these positioning terms in more detail.

  • Aligned images – when an image is aligned to text, you can choose a left, center or right placement. Text does not flow around the image, but will be placed (as a block) before or after the image, depending on the alignment chosen.
  • Floated images – when an image is floated, text flows around the image. You can easily define additional CSS rules to ensure sufficient whitespace around the image. Float rules are also commonly used to arrange images in horizontal rows, as you find with image galleries and thumbnail selectors.

Let’s walk through some examples.

Image alignment

Left align

Use the following HTML code to align an image to the left:

<img src="myimage.jpg" align="left">

Left alignment

As you can see, the image is aligned to the left, with the text displayed immediately to the right of the image.

Right align

Now use this HTML code to align the image to the right of the text:

<img src="myimage.jpg" align="right">

Right aligned image

Center align

To embed the image within the text, use the following code:

<img src="myimage.jpg" align="middle">

You can see that the image is embedded in the paragraphs , but it’s not the neatest of layouts.

Middle alignmentTop and bottom align

Alongside left, right and center alignment, you can use top and bottom alignment to define how the text and image are arranged.

<img src="myimage.jpg" align="top">

Top alignment

With top alignment, notice how the Sed feugiat tincidunt tellus text aligns with the top right of the image.

<img src="myimage.jpg" align="bottom">

With bottom alignment, the same text aligns to the bottom right of the image instead.

Bottom alignment

While HTML image alignment offers solutions for basic layouts, the code is quite inflexible and rather outdated. Floating images with CSS code is a more modern and, as you’ll see, flexible approach.

Floating images

Floating images right with text wrapping

In this example, we include the image tag in our HTML file, but identify the image with an ID (“hp”).

<img src="hp.jpg" alt="" width="200" height="200" id="hp"/>

The formatting code is called from a separate CSS file, which includes the float:right rule, plus some additional spacing, courtesy of the margin rule.

#hp  {
float: right;    
 margin: 0 0 0 15px;
}

Right float

As you can see, the resulting layout is neater, with text wrapping below the image.

Floating images left with text wrapping

With the image correctly tagged in the HTML file, you can simply edit the CSS rule to experiment with alternative layouts.

#hp  {
float: left;    
 margin: 0 15px 0 0;
}

Left float

No float

Use the float:none rule to simply display the image where it is placed in the text, without any wrapping. You can retain the margin rule (if desired) for spacing.

#hp  {
float: none;    
 margin: 0 15px 0 0;
}

No float

Clearing floats

One important, additional requirement when floating images is the correct use of the clear rule. Floated images (and other web elements) will overlap one another if you do not “clear” the float. Be sure to use the clear rule after each section in which an image is floating.

In this example, we have two sections (using div tags), one containing an image and the second containing an image, some text, and a red border. The first section is positioned using the float:left rule and you can see that it overlaps the second section.

Overlapping divs

The overlap occurs because we have not used the clear rule. Apply the following CSS rule to the second div:

.div2 {
     border: 1px solid red;
     clear: both;
}

Images cascade

 

You can now see that the two sections are now no longer overlapping. The clear rule can be used with a number of values:

  • none – allows floating elements on both sides.
  • left – no floating elements allowed on the left side.
  • right– no floating elements allowed on the right side.
  • both – no floating elements allowed on either side.
  • inherit – inherits the clear value of its parent.

Take some time to experiment with CSS rules like float and clear and you’ll soon master image alignment and advanced page layouts.

For further questions, or if you need help, please open a support ticket from your HostPapa Dashboard. Follow this link to learn how.

Was this article helpful?

Related Articles

Leave A Comment?