CSS Layout and Positioning Tutorials

This tutorial will cover the "position" property and the "float" property and how they can be used to create web page layouts.

Position Property

The position property is used to define the type of positioning of an (X)HTML element. The different types of positioning are: absolute, relative, static or fixed.

Static Positioning

By default, (X)HTML elements are positioned in a static position, which means that they appear one after another in the web page.

The code below is a web page to which no positioning is applied, which, by default means that the (X)HTML elements in the file are in a static position. Each <div> element in the example below appears one after another, from top to bottom.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> body { background: yellow; font: 13px arial, sans-serif; } div { width: 100px; height: 100px; border: 1px solid black; } div#one { background: red; } div#two { background: blue; } div#three { background: green; } div#four { background: gray; } </style> <html> <body> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <div id="one"></div> <div id="two"></div> <div id="three"></div> <div id="four"></div> </body> </html>

The code above produces this web page example.

Absolute Positioning

Absolute positioning allows you to place an (X)HTML element in a particular place within the web page, taking the specified (X)HTML element out of its' normal flow.

The "position: absolute;" property and value pair has 4 offset properties: top, right, bottom and left.

The offset keywords accept a length value (pixels, centimeters, em, etc.) or a percentage value (%) are used to specify the location on the web page where the (X)HTML elements are to placed.

The code below is an example where absolute positioning is applied to a web page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> body { background: yellow; font: 13px arial, sans-serif; } div { width: 100px; height: 100px; border: 1px solid black; } div#one { background: red; position: absolute; top: 0; left: 0; } div#two { background: blue; position: absolute; top: 0; right: 0; } div#three { background: green; position: absolute; bottom: 0; left: 0; } div#four { background: gray; position: absolute; bottom: 0; right: 0; } </style> <html> <body> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <div id="one"></div> <div id="two"></div> <div id="three"></div> <div id="four"></div> </body> </html>

The code above produces this web page example.

The "position: absolute" property and value place the <div> elements in the web page above relative to the initial visible area of the web browser. This is made clear in this web page example below, which has enough content to allow you to scroll the page down further.

Relative Positioning

When relative positioning is applied to an (X)HTML element, the element is still placed within the (X)HTML element in which it is nested, however, it is placed relative to where it would have been placed had relative position not been applied to the (X)HTML element.

Relative positining is applied with the use of the "position: relative" property and value pair.

The code below shows you how to apply relative positioning to an (X)HTML element. The web page that it produces contains three headings, the first with not positioning applied to it, which means that it is positioned statically. The second and third heading each have relative positioning applied to them.

NOTE: When applying relative position to an (X)HTML element, it is necessary to apply a width to that element. Not applying a width to the (X)HTML element will cause scrolling in the Firefox web browser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> h3.left { position: relative; left: -20px; } h3.right { position: relative; left: 100px; width: 500px; } </style> <html> <body> <h3> First heading </h3> <h3 class="left"> Second heading </h3> <h3 class="right"> Third heading </h3> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> </body> </html>

The code example produces this web page example.

Fixed Positioning

Fixed positioning allows you to place an (X)HTML element in a specific place within the web page relative to the initial visible area of the web browser and to have that element remain in that fixed position, even if the web page is scrolled.

NOTE: Fixed positioning is not supported in the web browser Internet Explorer 6, however, there are a few work-arounds to this problem. This particular tutorial will not cover these work-arounds.

The code below shows you how to give an (X)HTML element a fixed position.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> div { width: 100px; height: 100px; background: red; border: 1px solid black; position: fixed; top: 25px; left: 25px; } </style> <html> <body> <div></div> <p> Scroll the page down and notice that the element to which the fixed position is applied to stays in its' "fixed" position. </p> <p> This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. </p> <p> This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. </p> <p> Pretend that there is enough content to allow the web page scroll down... </p> </body> </html>

The code above produces this web page example.

NOTE: Remember that the fixed positioning value is not supported by Internet Explorer 6, however, there are some work-arounds which will

Float

The "float" property is used to shift (X)HTML elements to which the float property is applied to, either to the left or the right of a line, with the surrounding content flowing around it.

The float property is most commonly used to position smaller (X)HTML elements within a web page, but can also be used for the layout of web page, for example, to float navigation columns to the left or the right of a web page.

Before I show you how to apply the float property to an (X)HTML element I will show you a web page that does not have the float property applied to any (X)HTML element.

The code below produces a web page that does not have the float property applied to any (X)HTML element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> div { width: 200px; height: 200px; background: red; border: 1px solid black; margin: 10px; padding: 10px; } </style> <html> <body> <div></div> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> </body> </html>

The code above produces this web page example.

The code below shows you how to apply the "float: left" property and value pair to an (X)HTML element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> div { float: left; width: 200px; height: 200px; background: red; border: 1px solid black; margin: 10px; padding: 10px; } </style> <html> <body> <div></div> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> </body> </html>

The code above produces this web page example.

The code below shows you how to apply the "float: right" property and value pair to an (X)HTML element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> div { float: right; width: 200px; height: 200px; background: red; border: 1px solid black; margin: 10px; padding: 10px; } </style> <html> <body> <div></div> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> </body> </html>

The code above produces this web page example.

When one (X)HTML element is floated to the left and another (X)HTML element is floated to the right, they still flow along the same line of content, unless specified otherwise.

The code example below shows one (X)HTML element floated to the left and another floated to the right, with the content that follows wrapping aroung the floated (X)HTML elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> div#one { float: left; width: 200px; height: 200px; background: red; border: 1px solid black; margin: 10px; padding: 10px; } div#two { float: right; width: 200px; height: 200px; background: blue; border: 1px solid black; margin: 10px; padding: 10px; } </style> <html> <body> <div id="one"></div> <div id="two"></div> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> </body> </html>

The code above produces this web page example.

The float property is commonly used to float consecutive (X)HTML elements in one direction, for example, to create image a gallery.

The code example below produces a web page that has consecutive (X)HTML elements that are floated to the left.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> div { float: left; width: 100px; height: 100px; background: red; border: 1px solid black; margin: 10px; padding: 10px; } </style> <html> <body> <div></div> <div></div> <div></div> <div></div> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> </body> </html>

The code above produces this web page example.

Notice that in the web page example that the code above produces, the following content still wraps around the floated (X)HTML elements.

Clear Property

The clear property is used to control the content that wraps around (X)HTML elements that have the float property applied to them.

The clear property can the values: none, left, right or both. The "clear: both" property and value pair is commonly used to cancel the effects of one or more floated (X)HTML elements.

The "clear: both" property and value pair is also commonly used to create the footer in web pages.

The code below applies the "clear: both" property and value pair after the floated (X)HTML elements. Notice that the content that follows the floated (X)HTML elements do not wrap around the floated (X)HTML elements in the web page example that the code produces and instead starts a new line of content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> div.content { float: left; width: 100px; height: 100px; background: red; border: 1px solid black; margin: 10px; padding: 10px; } div.clear { clear: both; } </style> <html> <body> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="clear"></div> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> </body> </html>

The code above produces this web page example.

Web Hosting Resources

Free Website Templates