Chapter 5: Positioning and Floating

 

Now that we understand the CSS box model, let’s look at how to use CSS to specify the arrangement of these boxes on our web pages. In this chapter, we’ll be looking at two of the most important concepts in CSS: positioning and floating. Together, these two properties handle the layout of our web pages.

 

Positioning

 

The CSS positioning property allows you to position an element and specify which element should be on top in case of an overlap.

 

There are four methods to position an element. To understand how the four methods work, I strongly encourage you to try out the exercise at the end of this chapter. This is a topic that is difficult to understand without a hands-on approach.

 

Static Positioning

 

The first positioning method is static positioning. Static doesn't mean much, it just means that the elements are positioned according to the normal flow of the page. All HTML elements are positioned using this method by default. If you want to specify that static positioning be used (for instance to override another positioning rule for the same element), you write

 

position: static;

 

Relative Positioning

 

The second method to position an element is the relative positioning method. This method positions an element relative to its normal position. Normal position refers to the default position of the element when no positioning rule is specified or when static positioning is used.

 

Suppose we have two boxes, box1 and box2 with no positioning specified. If we create box2 after box1 in our HTML code, box2 will be positioned below box1 by default (refer to code below).

 

<!DOCTYPE html>

<html>

<head>

<style>

 

#box1 {

/*Some rules for styling box1*/

}

 

#box2 {

/*Some rules for styling box2*/

}

</style>

</head>

 

<body>

<div id="box1">Box 1</div>

<div id="box2">Box 2</div>

</body>

</html>

 

Now suppose we add the following rules to the CSS declaration of box2.

 

position: relative;

left: 150px;

top: 50px;

 

What we’ve done is change the positioning of box2 to relative positioning.

The image above shows the position of box2 when relative positioning is used. A white dotted box is added to show the original position of box2.

 

When relative positioning is applied, box2 is moved relative to its normal position. The line top: 50px; moves the box 50px away from the top of the original position and the line left: 150px; moves it 150px away from the left.

 

You can also use the right and bottom properties to position box2. For instance, bottom: 50px; will move box2 50px up from the original bottom of box2 while right: 50px; will move it 50px left from the original right edge of box2. In addition, you can use negative pixels to position the boxes (e.g. left: -50px)

 

Try the exercise for Chapter 5 and play around with the values to see how all these work.

 

Note that when relative positioning is used, the  element can end up overlapping other elements.

 

If you want to specify which element should be in front, you have to use the z-index property. The z-index property works on any element that has a position of either relative, fixed or absolute (i.e. not static). An element with greater z-index value will be positioned in front of an element with a lower z-index value.

 

Suppose you have two boxes, greenBox and redBox, and they overlap each other. If you declare the z-index of greenBox as

 

z-index: 1;

 

and the z-index of redBox as

 

z-index: 2;

 

redBox will be on top of greenBox as it has a greater z-index value.

Fixed Positioning

 

The third positioning method is fixed positioning. As the name suggests, an element that is positioned using the fixed method will always stay at its assigned location; it will not move even when the page is scrolled. Fixed positioning is commonly used to position social sharing buttons at the side of a web page. To use fixed positioning, we write

 

position: fixed;

 

When using fixed positioning, we can use the top property to specify the number of pixels the box should be from the top of the page while the left property specifies the number of pixels it should be from the left of the page.

 

In addition to top and left, there are also the right and bottom properties, which specify the number of pixels the box should be from the right side and bottom of the page respectively.

 

Absolute Positioning

 

The final method is absolute positioning.

 

When absolute positioning is used, an element is positioned relative to the first parent element that has a position other than static. If no such element is found, it is positioned relative to the page.

 

For instance, suppose we have the following HTML code:

 

<div id="box1">Content in Box 1</div>

<div id="box2">Content in Box 2</div>

 

and the following CSS declaration:

 

#box1 {

position: relative;

}

 

#box2 {

position: absolute;

top: 50px;

left: 150px;

}

 

Assuming that box2 is not a child element of any element that has a non static positioning, it’ll be positioned relative to the page. That is, it is positioned 50px from the top of the page and 150px from the left.

 

However, if we change the HTML structure to

 

<div id="box1">Content in Box 1

<div id="box2">Content in Box 2</div>

</div>

 

box2 is now a child element of box1. Hence box2 will be positioned relative to box1. It is now 50px down from the top and 150px right from the left side of box1.

 

In a way, absolute positioning is similar to relative positioning, except that the element is positioned relative to its parent element instead of its normal position.

 

Floating

 

The next CSS property we are going to discuss is floating.

 

Floating is a technique used to arrange elements on a page. The idea is similar to putting books onto a bookshelf. Imagine you have a stack of books of varying thickness and height and you need to put all the books onto a bookshelf. In addition, you are not allowed to rearrange the books. That is, the books must be placed onto the bookshelf in the same order as they were in the original stack.

 

To perform this task CSS-style, we’ll start with the top row. We’ll put the books one by one onto the top row, starting from left to right. Suppose the top row is almost full and you have a book that is too thick to fit onto the top row. What do you do? You’ll move to the next row below it, right? Well, CSS does it a little differently. CSS will try to fit this ‘book’ onto the same row, below the previous ‘book’, as long as there is some space below it (refer to Box 5 in the next diagram). This method of stacking the books is similar to doing a float: left in CSS.

 

Alternatively, you can do a float: right in CSS. This is equivalent to starting from the top row but stacking the books from right to left.

 

To see how this works in CSS, suppose we have 7 div boxes of varying heights and widths that are floated left (refer to code below):

 

<!doctype html>

<html>

<head><title>CSS Float</title>

      

<style type="text/css">

div {

padding: 10px;

border: 1px dashed black;

margin: 5px;

float: left;

}

 

#box1 {

width: 60px;

       height: 100px;

}

#box2 {

width: 100px;

       height: 20px;

}

 

#box3 {

width: 50px;

       height: 150px;

}

#box4 {

width: 20px;

       height: 50px;

}

#box5 {

width: 150px;

       height: 120px;

}

#box6 {

width: 120px;

       height: 70px;

}

#box7 {

width: 25px;

       height: 80px;

}

 

</style></head>

 

<body>

       <div id="box1">Box 1</div>

       <div id="box2">Box 2</div>

       <div id="box3">Box 3</div>

       <div id="box4">Box 4</div>

       <div id="box5">Box 5</div>

       <div id="box6">Box 6</div>

       <div id="box7">Box 7</div>

  

</body>

</html>

 

If we run this code, we’ll get something like the next image.

 

Notice how the boxes are arranged from left to right, starting from the top. As box 5 is too thick to fit into the top row, CSS places it below the previous box.

 

Now suppose in addition to these 7 boxes, we also have the following text that we want to display on the site.

 

<p>This is some text that is not floated.</p>

<p>This is more text that is not floated.</p>

<p>This is yet more text that is not floated.</p>

 

If these paragraphs are included in the HTML document after the div boxes, we’ll get the diagram below. These paragraphs will just ‘squeeze’ into whatever space is available.

 

If you do not want that to happen, you can clear the float by using the clear: both property. To do that, make the following addition to the CSS declaration:

 

.clearFloat { clear: both; }

 

To use this class, we add it to the first <p> tag:

 

<p class="clearFloat">This is some text that is not floated.</p>

 

You only need to add the clearFloat class to the first <p> tag. Once you clear the float, the text will no longer wrap around the boxes.

 

That’s the gist of how positioning and floating works in CSS. I strongly encourage you to try the exercises for this Chapter to get a better understanding of these two concepts.

 

Exercise 5

 

Download the source code for this exercise from http://learncodingfast.com/css and unzip the file. The source code for this exercise can be found in the Chapter 5 - Positioning and Floating folder.

 

Exercise 5.1

               

1.       Open the file Chapter 5 - Positioning.html concurrently in your browser and text editor.

2.       Add the rule position: static; to the CSS declaration for #box1 and #box2 and observe what happens to the positions of the two boxes.

Nothing changes right? That's because all HTML elements are positioned using static positioning by default.

3.       Remove the rule position: static; from the CSS declaration for #box1 and #box2. Add the following lines to the CSS declaration of #box2.

position: relative;
top: 50px;
left: 70px;

Observe what happens to the position of the second box. 3. It is now 50px from the top and 10px from the left of its normal position.

Play around with different values for the top and left properties and see what happens to the position of box2. Try negative values as well. You can also try using the right and bottom properties.

4.       Now change the CSS declaration of #box2 back to

position: relative;
top: 50px;
left: 70px;

Notice that the text is partially hidden by the red box?

If you want the text to appear in front of the red box, add the following lines to the CSS declaration of p.

position: relative;
z-index: 2;

You can set the position to either relative, absolute or fixed. It does not matter as long as it is not static.

Next, add the line z-index: 1; to the CSS declaration of #box2. Refresh the page. The text should now be in front of the red box since the z-index of the text is greater than the z-index of the red box..

If you want the red box to be in front of the text instead, just change the z-index of #box2 to a value greater than 2.

5.       Now, change the height of #box1 to 5000px and the positioning of #box2 to fixed (position: fixed;).

Scroll the page. 5. The red box does not move as it uses fixed positioning now.

6.       Change the positioning for #box2 back to relative and the height of #box1 back to 100px. Add the following line just before the <p> tag in the HTML code at the bottom of the file.

<div id="box3"></div>

Now add the following CSS declaration to style box3.
#box3 {
   position: absolute;
   top: 50px;
   left: 150px;
   background-color: yellow;
   width: 50px;
   height: 50px;
   padding: 20px;
   border: 5px dotted black;
   margin: 10px;
}

box3 uses absolute positioning and since it is not a child element of any <div> elements, it is positioned relative to the page. That is, it is positioned 50px from the top of the page and 150px from the left.

7.       Now change the <div> code for the three boxes to the following:

<div id="box1"> </div>
<div id="box2">
       <div id="box3"></div>
</div>

box3 is now a child element of box2. Therefore it is positioned 50px down from the top and 150px right from the left side of box2 as it is now positioned relative to box2.

 

Exercise 5.2

1.       Open the file Chapter 5 - Floating.html concurrently in your browser and text editor.

2.       Resize your browser-window to see what happens when the <div> elements do not have enough room.

3.       Modify the CSS declaration for div by changing float: left; to float: right;. Observe what happens to the positions of the boxes.

4.       Now change the rule back to float: left; and add the code below to the HTML code, just above the </body> tag.

<p>This is some text that is not floated.</p>
<p>This is more text that is not floated.</p>
<p>This is yet more text that is not floated.</p>

Refresh the page and observe where the text is. Resize the browser window to see what happens when the width of the page is narrow.

5.       Next, add the code

.clearFloat { clear: both; }

to the CSS declaration just above the </style> tag.

Change the first <p> tag to <p class="clearFloat"> and observe what happens.