Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Understanding CSS Positioning

By Stephen Bucaro

One of the most important CSS webpage layout concepts to understand how to position webpage elements. In this article you'll learn how a web browser places elements on the webpage as it renders the display, and you'll learn about the five different methods of positioning: static, relative, absolute, fixed, and float.

Every element on a webpage, be it an image, a drop-down list, or just a paragraph of text, is actually a rectangular box. When a Web browser displays a page, it generally places elements on the webpage from left-to-right and from top-to-bottom. You can think of this as the webpage elements "flowing" into position. As the elements flow onto the webpage, they line themselves up along a "baseline".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<style type="text/css">
.myBox
{
background-color:crimson;
border-style:solid;
border-width:1px;
padding:4px;
}
</style>

</head>
<body>

<span class="myBox">Element 1</span>
<span class="myBox">Element 2</span>
<span class="myBox">Element 3</span>

</body>
</html>

Webpage elements that flow into position like this are called "inline" boxes. But certain Webpage elements, such as paragraphs <p>, divisions <div>, and horizontal rules <hr /> do not normally flow on the webpage from left-to-right. Each time one these elements is displayed, it starts a new line on the left side of the webpage, and it causes the next element in the flow to start a new line. Webpage elements that start a new line are called "block-level" boxes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<style type="text/css">
.myBox
{
background-color:crimson;
border-style:solid;
border-width:1px;
padding:4px;
width:80px;
}
</style>

</head>
<body>

<div class="myBox">Element 1</div>
<div class="myBox">Element 2</div>
<div class="myBox">Element 3</div>

</body>
</html>

Block-level elements into position

You can change the way a Webpage element flows into position by setting its "display" property. Setting "display:inline" for a block-level element will cause it to flow onto the webpage from left-to-right. Setting "display:block" for an inline element will cause it to start a new line.

• If you place text in a webpage, outside of a defined box element, it becomes what is called an "anonymous block". The display property of anonymous boxes are inherited from their enclosing non-anonymous box. In some cases this may be the <body> element, which is a block-level element.

If you want more control over the position of a webpage element than that provided by the "display" property, you need to set the elements "position" property. The default positioning for all elements is "static", which means the element is not positioned and gets located where it would in the normal flow. You wouldn't normally specify "position:static" unless you wanted to override a positioning that had been set previously.