The Float Property: Web Design: CSS Part 23

Float property

The Float Property

Now that we have finished the ABSOLUTE, FIXED, and RELATIVE positioning lessons, we’re going to start working with the float property. The float property can be used in many ways. Wrapping text around an image is probably one of the most common uses. Some websites are even entirely positioned with floated elements. We will start with a few simple floats to show you how it works. See the first set of images below.

index.html Example 1

float positioning html

my-styles.css Example 1

float: property css

Example 1 Display Page

float property display

To begin with example 1, we have just added four div elements with CSS classes to our index.html document and set the background color for each to match the class names of black, blue, red, and orange. By default, the div elements display in block format. And if you remember; block elements take up the entire width of the browser and display on top of each other. Each one displaying on a new line. Refer to the Example 1 Display Page image to see an example of this. We’ll apply the float property to our div elements. See the example below.

my-styles.css Example 2

float: left property css

Example 2 Display Page

float: left display

There was no change to the index.html document. In our my-styles.css stylesheet, we have added float: left; to each of our CSS class rules. Looking at the Example 2 Display Page, we see that our div’s have all floated to the left of the browser screen. The will position side by side until they run out of space. If there isn’t enough room; then they move to the next line. This is very similar to an inline element. We could have also used float: right; instead of left, and our div elements would have floated to the right of the screen. If you resize your browser window; the floated elements will also act like inline elements. The float property is used very often in responsive web design.

There are a few more things to go over with the float property. The first is that any element that is positioned absolute will ignore floated elements. See example 3 below.

index.html Example 3

float positioning

my-styles.css Example 3

float: left css

Example 3 Display Page

float property display

In the index.html, we have added a p and an h1 element. We are going to leave the h1 display in its block format, but over in our my-styles document, we create a CSS rule for the p element to position it using absolute and also give it a font color of white. The reason for the white text is because after we give it the absolute coordinates; it displays partly on top of our black div and partly on top of our blue div. We want to see the text, so we make it white in the CSS rule. Looking at the h1 element in our Example 3 Display Page, we can see that it recognizes our floated elements and squeezes itself into the left over space. The absolutely positioned p element, on the other hand, ignores the floated elements and displays right on top of them. Keep that in mind when using absolute positioning and the float property. The final thing we need to go over in this lesson is the clear property. Let’s use it in the final example below.

my-styles.css Example 4

clear: both declaration

Example 4 Display Page

the clear property display

There is no change in the index.html, but in the my-styles doc. we have added a CSS rule for our h1 element with the declaration clear: both;. This declaration tells the browser that we don’t want any floated elements to display on the left or right sides of our h1 element. Other values that could have been used here instead of both are left and right. Both of these values work in the same way, but they specify a side to not allow floated elements. In the final Example 4 Display Page, our h1 element now moves down underneath all of our floated divs. It takes up it’s own line, not allowing any floated divs on either side. If we add the clear: both; declaration to our p rule, there would be no change because like we discussed earlier in the lesson; absolute positioned element ignore floated elements. This can be used to your advantage if you’re looking for this type of effect.

That’s it for this lesson on the float property. For a little side exercise, try floating some of the divs left and some of them right to see what results you get. Play around with the clear property and it’s values of left, right, or both. And finally, what happens when you move the h1 element in the index.html document above all of the other elements? For example, put it right after the opening <body> so that the browser reads and renders it before all of the other elements on the page.

index.html Source Code


<!DOCTYPE html>
<html>
<head>
<title>The Float Property</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>
<div class="black"></div>

<div class="blue"></div>

<div class="red"></div>

<div class="orange"></div>

<p>Absolutely positioned p element.</p>

<h1>Normally positioned heading</h1>

</body>
</html>

my-styles.css Source Code


.black{
background-color: black;
height: 100px;
width: 400px;
float: left;
}
.blue{
background-color: blue;
height: 100px;
width: 400px;
float: left;
}
.red{
background-color: red;
height: 100px;
width: 400px;
float: left;
}
.orange{
background-color: orange;
height: 100px;
width: 400px;
float: left;
}p{
color: white;
position: absolute;
top: 20px;
left: 250px;
}
h1{
clear: both;
}

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: