CSS Layout

CSS | Styles | Colors | Type | Classes-IDs | Layout | Properties | Value Types

The Layout of elements in an XHTML file is static by default. Static positioning is the normal top-down flow of elements in sequence. Relative positioning is relative to the element's static position. Absolute positioning is relative to the body element. Fixed positioning is relative to the browser window. The position property is used to position elements accordingly. Top, right, bottom, and left attributes are added to offset the elements.

The position of an element can be moved relative to its static position...

p {position:relative; top:-20px;}

The position of an element can be moved relative to the body element. All other elements are ignored...

p {position:absolute; top:20px;}

The position of an element can be moved relative to the browser window. The elements are fixed in place even when moving the scroll bar in the browser...

p {position:fixed; top:0px;}

---

The content area of any block tag is an invisible box. Styles with classes or IDs can define border, size, margin, padding, position, and other attributes. Using an ID, the following example declares a border for the division tag, including a border style, border width, and border color. The CSS file is coded as...

#head {border-style:solid; border-width:2px; border-color:#ff0000;}

The XHTML file is coded as...

<div id="head">
<h1>Header Section</h1>
</div>

By default, extra space is added as padding before and after the header tags. The output to the browser is...

As an option, the border attributes can be combined as a single value.

#head {border:2px solid #ff0000;}

Optional values for border style are solid, double, dashed, dotted, groove, ridge, inset, and outset.

---

The following example declares a border, including a width and height for the division tag. The CSS file is coded as...

#head {border:2px solid #ff0000; width:300px; height:150px;}

The XHTML file is coded as...

<div id="head">
<h1>Header Section</h1>
</div>

The output to the browser is...

---

The margin is the space outside the border of an element. The padding is the space inside the border of an element. Margin and padding are used for positioning the element. Padding is added to the width and height of the element.

#head {border:2px solid #ff0000; width:300px; height:150px;
       padding:25px; margin:25px;}

The XHTML file is coded as...

<div id="head">
<h1>Header Section</h1>
</div>

The output to the browser is...

---

Each individual side for border, margin, or padding can be defined as separate values. The four sides are top, right, bottom, and left. One or more values can be defined at a time...

• Border properties are border-top, border-right, border-bottom, and border-left.
• Margin properties are margin-top, margin-right, margin-bottom, and margin-left.
• Padding properties are padding-top, padding-right, padding-bottom, and padding-left.

As an option, multiple values for border, margin, or padding can be combined as a single value. If four values are used, the order is top, right, bottom, and left. If three values are used, the order is top, right/left, and bottom. If two values are used, the order is top/bottom and right/left. If one value is used, all sides are equally affected...

#head {border:10px 10px 10px 10px;
       margin:10px 10px 10px;
       padding:10px 10px;}

Setting the margin of the body element to 0 is recommended. Depending on the browser, different amounts of extra space is added by default.

---

The float property is used to align elements in columns and rows. If an element is floated left, all following elements align to the right. If an element is floated right, all following elements align to the left. The CSS file is coded as...

#head {border:2px solid #ff0000; width:300px; height:150px; float:left;}

The XHTML file is coded as...

<div id="head">
<h1>Header Section</h1>
</div>

<h2>Header 2</h2>
<p>This is a paragraph.</p>

The output to the browser is...

Header 2

This is a paragraph.

The clear property is used to keep a specified element from floating left or right. The values for clear are left, right, or both. The CSS file is coded as...

#head {border:2px solid #ff0000; width:300px; height:150px; float:left;}
p {clear:left;}

The XHTML file is coded as...

<div id="head">
<h1>Header Section</h1>
</div>

<h2>Header 2</h2>
<p>This is a paragraph.</p>

The output to the browser is...

Header 2

This is a paragraph.