Layout and Design using Style Sheets

Style sheets offer not only control over the presentation and style of text, but also over the layout of a web site in general. Going beyond font size and color or decoration, you have the position of content or sections of content and the presentation of images that compose a design that carries your content forward.

Avoiding Tables for Layout

The old school of thought for web-based layout revolved around tables. Table cells were used to layout images and content in a design. They were easy to use and visually (not semantically) made sense for splicing together content and images. However, given the ridged nature of tables, they also provide very little flexibility in terms of the design and overall presentation of content. Once you have a table based design, you're mostly stuck with that design unless you create a new design from scratch. There is very little room for change without affecting the underlying structure of your content.

Tables were also created to display tabular data, not layout pages. It's like using the bold tag (b) to make something italic. Its not what the bold tag was made for, so why use it that way? On top of that, when tables are used for layout, you usually end up with unecessarily complicated source code, especially when dealing with nested tables. This makes the code harder to read an understand. When you see a table tag in source code, you should expect to see a table, not wonder what its purpose is within the design.

Using a more semantic approach to design with style sheets to handle layout and content presentation not only makes for less complicated, more readable source code, but it also allows for the flexibility for virtually any design to be applied to the same content with little or no modification to the underlying HTML structure. All you would need to do instead is simply change the style sheet.

Element Positioning

Elements in an HTML document are initially positioned based on the flow of the document, or how block and inline elements work with each other within the document structure. For more information on block and inline elements, see Element Content Models. CSS is used to style the content of the document as well as position it as required within its desired layout.

The CSS properties concerning placement include, top, right, bottom, and left. These in combination with width and height, and any margin, border and padding values, represent properties relating to the box model. For more information see Understanding the Box Model. These values determine size and placement of an element within the document.

When positioning elements within a document, you need to specify how you are positinoning an element with the CSS position property. The two most common positioning types are relative and absolute positioning.

Relative Positioning

Relative positioning positions an element based on its current positioin within the flow of the document. The original document flow remains unchanged and other elements still react as though the positioned element were still in its original position. Relative positioning just moves the positioned element from that position by an amount specified.

Example:

flowers flowers2 flowers3

Source code:

.relative-image {
	position:relative;
	left:20px;
	top:20px;
}
<div class="container">
	<img src="examples/images/flowers.jpg" alt="flowers" width="150" height="100" />
	<img src="examples/images/flowers2.jpg" class="absolute-image" alt="flowers2" width="150" height="100" />
	<img src="examples/images/flowers3.jpg" alt="flowers3" width="150" height="100" />
</div>

Notice the shift in position of the second flowers image. The change is 20px to the left and from the top of its original position. The third flower image is positioned as though the second image were still where it was originally.

Note: Though top and left were used in this example, right and bottom are equally as useful in positioining. The value of right represents the distance from the right edge of the containing element and bottom represents the distance from the bottom edge of the containing element.

Absolute Positioning

Absolute positioning removes an element from the flow of the document and positions it based on a containing element. Other elements around an absolutely positioned element react as though the element was completely removed. Position is determined by the top left of the closest ancestor (containing) element who has aposition for it defined - either absolute or relative. If there is no ancestor with position defined for it, the top left of the document is used.

Example:

flowers flowers2 flowers3

Source code:

.absolute-image {
	position:absolute;
	left:20px;
	top:20px;
}
<div class="container">
	<img src="examples/images/flowers.jpg" alt="flowers" width="150" height="100" />
	<img src="examples/images/flowers2.jpg" class="absolute-image" alt="flowers2" width="150" height="100" />
	<img src="examples/images/flowers3.jpg" alt="flowers3" width="150" height="100" />
</div>

You can see here that with absolute positioning, the second flower image is now positioned based on its container, 20px to the left and from the top of the containing div (which was specified as being positioned relatively). Also, because that image is removed from the flow of the document, the third flower image reacts as though the second flower image wasn't even there. If the container was not given an explicit position value, flower 2 would have been placed 20px to the left and top of the entire web page (based on body element).

Floating

There is another method of positioning that uses floating. When you float an element, you allow it to be removed from the normal document flow and have it be aligned either to the right or left of its container. Though floated elements are removed from the normal document flow, they do maintain flow with other floating elements and other inline elements.

If you've ever worked with right and left-aligned images within text, you are familiar with the general behavior of floats. A right-aligned image is the same as an image floating right. The same applies to left-aligned images and floating.

Example:

flowersLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla purus. Donec malesuada pretium est. Etiam vitae lacus a urna dignissim adipiscing. Vestibulum a est non nisi ultricies semper.

Source code:

.floating-right-image {
	float:right;
}
<div class="container">
	<img src="examples/images/flowers.jpg" class="floating-image" alt="flowers" width="150" height="100" />
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla purus.  Donec malesuada pretium est.
	Etiam vitae lacus a urna dignissim  adipiscing. Vestibulum a est non nisi ultricies semper.
</div>

Because the image within this div container is floating right it is aligned to the right edge of the container and causes text with the image in the container to wrap around it.

When you float an element, it's required that you specify a width. When you have multiple floating block elements which do not, in total, extend to the width of the container, they will be positioned next to each other until that width is met or exceeded at which point the remaining floating elements that follow will be placed on the next line. In this sense, floating makes block elements behave much like inline elements.

Example:

Floater 1
Floater 2
Floater 3

Source code:

.floater {
	float:left;
	width:150px;
	border:1px solid red;
	background-color:#FFFFCC;
}
<div class="container">
	<div class="floater">Floater 1</div>
	<div class="floater">Floater 2</div>
	<div class="floater">Floater 3</div>
</div>

You can see how Floater 2 is positioned to the left of floater 1 as a result of having been floated. Floater 3 would also have been nest to floater 2 except the container was not wide enough causing it to wrap.

You may also have noticed that the container used for this floating example has no height of its own. All you see is the border with no content. This is because, as floaters, the child div elements of that container are out of normal flow and no longer affect the height of that container. This is the same behavior seen with absolutely positioned elements. Floating elements, however, have an additional advantage over absolutely positioned elements when it comes to this, though. Floating elements can be cleared.

Elements following floating elements have the option of clearing a float direction, either right, left, or both for any floaters floating either left, right, or... both. By clearing a float, an element restores normal flow to the container at the line following the last floated element. This allows containers, and essentially other elements, to recognize the area occupied by floating elements and continue with normal document flow.

Example:

Floater 1
Floater 2
Floater 3
Clear floats

Source code:

.floater {
	float:left;
	width:150px;
	border:1px solid red;
	background-color:#FFFFCC;
}
.clear {
	clear:left;
	border:1px solid red;
	background-color:#FFFFCC;
}
<div class="container">
	<div class="floater">Floater 1</div>
	<div class="floater">Floater 2</div>
	<div class="floater">Floater 3</div>
	<div class="clear">Clear floats</div>
</div>

Here, a normal container is used without an explicit height. It is able to match the height of its contents thanks to the clearing element. Any additional elements following the clearing element are not affected by the floats before it.

Floating elements, because they allow adjacent block elements with the option to clear, make them incredibly useful in page layout and design.

Centering

In CSS, horizontal centering for text is handled through the text-align property. This property, in fact, works for all inline elements within the block defined with text-align:center. This, however, does not work with block elements. For block elements, centering is a little more unintuitive.

To center block elements with CSS, you have to use the block's margins. More specifically, you have to set the left and right margins of a block element with a set width to be auto. Then, when rendered, the block element will be centered within its container.

Example:

Centered

 

Source code:

.center {
	margin-right:auto;
	margin-left:auto;
	width:100px;
	border:1px solid red;
	background-color:#FFFFCC;
}

<div class="container"> <div class="center">Centered</div> </div>

This, however, only works for horizontal centering. Vertical centering is not easily handled through CSS, not without using tables or some more complex work arounds.

Note: Centering in this manner does not apply to positioned or floating elements.

CSS Layouts

When it comes to layouts, you are typically dealing with two basic types of layouts, fixed-width layouts and liquid layouts. Fixed-width layouts are layouts whose width never changes. Height can can change as content within the layout changes, but the width will always remain constant.

Liquid layouts are layouts whose width expands with the client window. As the client window gets wider, the layout stretches to fit the new width. When thinner, so too is the layout

image

Most CSS layouts you see in practice are fixed-width layouts. This is simply because they are easier to implement, especially when dealing with design elements and images that would need to be built to "stretch" in liquid layouts.

Your standard web page layout consists of a header, a body consisting of a navigation menu and content, and a footer (and not necessarily by those names; they can be identified any way you please).

image

The basic logical division in HTML reads something like:

<div id="header">Header</div>
<div id="body">
	<div id="navigation">Navigation</div>
	<div id="content">Content</div>
</div>
<div id="footer">Footer</div>

In terms of HTML for layout, that's mostly all you need.

When trying to relate CSS to a layout, you'll need to look at how the divisions of your layout are arranged in respect to each other. Given that the navigation block is positioned to the left of the content, it would most likely require a float. That being the case, another element will be needed to clear the float in order to assure the body container fits to its contents (the navigation and content elements) and the footer is placed appropriately beneath them. In fact, the footer can be the element that clears the float. Other elements may also be needed for different design elements, but that would depend on the design.

A simple implementation of the above would be seen with this simple layout example. Note the use of a margin for the content to separate its content from the floating navigation. Another option would be to float the content block as well. Using a margin, however, allows the content block to better "fit" within the body block without having to worry about matching the widths width the navigation. The use of the margin means the width of the body element could be changed and the navigation and content would still fit appropriately.

Essentially, it's that easy. Assume normal document flow and arrange elements around each other as needed. Above, an element was floated to facilitate the necessary horizontal positioning and then cleared to allow the continuing flow of the document. As you work with different layouts, different approaches will be necessary but the process and approaches are generally the same.

CSS Design

Page layout is only part of the overall design of a site. What remains, and what is the most important aspect visually, is the design imagery.

CSS-based design images are background images. This (mostly) prevents the need for a specific tag like img to exist within the HTML content to facilitate the design. What this also means is that there is true separation from content and design or presentation. If all the design is, is background images applied through a style sheet, then there's nothing in the content that directly relates to the design meaning a design can be easily applied or removed with no direct affect on the content itself. Keep in mind that using background images for design doesn't make the img tag obsolete. It is still used to display images sensitive to the content - images that wouldn't change no matter what the design of the site might be.

Though there is separation between content and design, it doesn't mean your content will be completely free of interence. Content will usually require some extra tags that are not necessary to support a desired design. However, once those elements are in place, they tend to be all you need to have the flexibility to completely change a site's design without modifying the underlying HTML content. And generally, these are tags that are transparent to the content. For proof of this concept, see CSS Zen Garden.

Consider the following simple design:

image

This follows the basic layout covered earlier. In order to get the actual design into that layout, you would use CSS to size and apply the appropriate backgrounds to your HTML elements. This design in particular consists of 3 background images. One for the header, one for the body and one for the footer. The body background would be thin and repeat vertically to allow for content of varying lengths while the header and footer images retain static sizes.

image

When implemented into the layout with CSS using the background-image property, you get the following simple design example. Notice the changes in the style sheet marked as bold. You can see the application of the backround images and some sizing to make the elements fit together better - all modifications within the style sheet only, not the HTML.

One additional change was made to the Company heading. It was given a display of none. This was added because the header background already contains the text "Company" making the heading text itself redundant. Byt hiding it in this manner with CSS, it continues to exist in the content but is just not visible with this design. Should this CSS design be removed, the company header would again be visible. Note too how, similarly, the bullets in the unordered list have been removed with CSS using the list-style property.