Floating Elements in HTML 5

HTML5 Basics - Part 26

Forward: In this part of the series, we see how to float elements in HTML5.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 26 of my series HTML5 Basics. I assume you have read the other parts of the series before arriving here. The links to the other parts of the series are given at the end of this tutorial. In this part of the series, we see how to float elements in HTML5.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Containing Element
A containing element is an element that has other elements as its content. Good examples of contain elements are the body, div and section elements.

Floating an Element
To float an element means you sent it to the right end or left end inside the containing element. When you do this, everything being equal, text will go around it on the other side. A typical element to float to the right or left end, is an image, which is an illustration for the text on the other side around it. Other elements you would like to float are the nav and aside elements.

To float an image element to the right, you use the following attribute and value in the image tag:

    style="float:right"

To float the image element to the left, you use the following attribute and value in the image tag:

    style="float:left"

The difference between the above two attributes is that one has the word, “left” and the other has the word, “right”. So an image tag would be something like,

    <img src= "url" style="float:right">

The position of the tag in the web page would be like in,

<!DOCTYPE HTML>
<html>
<head>
    <title>Quick Illustration</title>
</head>
     <header>
    </header>
     <img src= "url" style="float:right">
    <section>
    </section>
    <footer>
    </footer>
<body>
</body>
</html>

In this page, as the presentation of the section starts at the browser you would see the image at the right end inside the body element. Read the above code if you have not done so.

Inline Element
For an element to be floated, it should be an inline element. The image element is an inline element by default (naturally). You can convert a block element to an inline element. To do this, you use the following attribute and value in the start tag of the element:

    style="display:inline"

To float the converted element to the right, the attribute is modified as follows:

    style="display:inline; float:right"

To float the converted element to the left, the attribute is modified as follows:

    style="display:inline; float:left"

Note the use of the colon and semicolon.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Floating Elements in HTML 5

HTML5 Basics - Part 26

Introduction

Related Links

Comments