|
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>
|
Free Downloads
RSS Feed