Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Understanding CSS Positioning

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

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



RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268