CSS can be used to create complex appearances for web pages. For example, you can create columns where there’s a menu on the left or right side and content in the other column.

When working with alignment and column layouts, it is helpful to add a border to the element to see where it begins and ends so that you can see how the layout looks.

Single Column Fixed Layout

There’s only one column, aligned on the left of the page. You can also control the alignment with CSS.

body {
font-family: arial,helvetica,sans-serif;
}
#container {
margin: 0 auto;
width: 600px;
background: #FFFFFF;
}
#content {
clear: left;
padding: 20px;
}

The HTML for this layout uses a <div> element as a container. The container helps to create the layout and doesn’t hold any text content of its own.

width

It sets the horizontal width of an element. In this case, the container is set to 600 pixels wide. No matter how small the browser window is, your HTML will never get smaller than 600px.

margin

The margin property defines the spacing on the outside of the element. The value "auto" means that the browser will choose the value.

clear

With clear, no elements can appear on the side of the element to which the rule applies. In this case, clear left is used on the <div> with the id of #content. This means that nothing could appear on the left side of that element. Other values for clear include both, none, right, and inherit.

Single Column Liquid Layout

A liquid layout can work better in certain devices. The fixed-width layout can sometimes result in a horizontal scroll bar at the bottom of the page. To change the layout to a liquid layout, you only need to change a small amount of CSS in the #container, as shown below:

body {
font-family: arial,helvetica,sans-serif;
}
#container {
margin: 0 30px;
background: #FFFFFF;
}
#content {
clear: left;
padding: 20px;
}

The only changes are to remove the width property within the #container and also change the margin from "0 auto" to "0 30px".

Two Column Layout

A two-column layout is used to add a menu along the side of a page or links to other content or anything in sidebar.

The HTML uses the container <div> from the single-column layout and adds another container <div> to hold the content. That <div>, called mainContainer, holds both the content and the sidebar. The other addition is the sidebar itself, that holds a menu with an unordered list (<ul>) in it.

#container {
margin: 0 auto;
width: 900px;
}
#mainContainer {
float: left;
width: 900px;
}
#content {
clear: left;
float: left;
width: 500px;
padding: 20px 0;
margin: 0 0 0 30px;
display: inline;
}
#sidebar {
float: right;
width: 260px;
padding: 20px 0;
margin: 0 20px 0 0;
display: inline;
background-color: #CCCCCC;
}

float

The float property defines whether an element will move or float within a layout, either to the left or to the right or whether it won’t float at all (none), as is the default. However, because of two columns next to each other, you need to float the content container to the left and the sidebar to the right.

display

The display property sets how the element should be displayed. Certain elements are known as block-level elements and display the entire width of the page. The <div> element is a good example of this. Because columns appear next to each other, you need to change this block display behavior to inline, so that the element doesn’t extend the full width of the page.

Liquid Layout

Converting fixed to a liquid layout means changing the width and margin values in the CSS from pixels (px) to percentages (%).

Headers and Footers

Headers are typically used to convey information such as the name of the site or to provide a menu. Footers are used to provide additional information such as copyright and are also being used to provide a map of links within a site, known as a sitemap.

Creating a header and footer is accomplished in same manner as adding sidebar. An additional <div> is created to hold the content for each and CSS rules are applied to those <div> elements to position them.