Basic Page layout with CSS

Before the introduction of CSS there was very little in the way of HTML commands that allowed you control how your web site appeared. A number of tags such as <font> were introduced in some browsers that were looking to fill this gap and didn't want to wait for the introduction of CSS so as to handle things properly. Most of the HTML tags that were added to allow you to define how the web page should appear have either been deprecated (meaning that you should not use them and future browsers are not required to support them) or were proprietary tags that were never official in the first place.

One group of tags that was introduced in HTML2 and which has not since been deprecated is the <table> tag and the tags that go within it to define the parts of a table. Almost as soon as it was introduced people started using tables to lay out their web pages closer to the way that they wanted them to look by using the table to provide a grid structure into which the page elements could be placed. This was never the intended use of tables and in fact CSS provides as much more control over the placement of elements of your web page compared to tables as using tables does compared to the linear structure that was all that was available before the introduction of tables. Using tables to define your page layout is not only an inappropriate use of tables but it also confines you to using a grid structure for the layout of your page. Using CSS for your page layout allows you to place all of the page elements exactly where you want them without being confined to a grid. The reason that tables have not been deprecated is the same reason that they were introduced in the first place. The purpose of tables is to display tabular data. If your table content looks okay with borders around all the cells, if it has column and/or row headings, or if it has a caption that describes the table content then chances are that the content is tabular data that should be contained within a table.

To position any tables containing tabular data along with positioning everything else that you want in your web page we should use CSS which not only results in much less code than we get by trying to force the page into a grid structure but which is also actually much easier to code once you know what to do as well as being able to do things that are impossible to do using a table.

At least 95% of all web pages can be laid out precisely how you want them to look by simply using a small number of CSS attributes to define each of the elements of your page properly. We are going to look at what these CSS attributes are and how to use them to lay out most of your web pages.

The first CSS attribute that I am going to mention (because it is the one you almost certainly expect me to mention first) is the position attribute. This attribute has four possible values - static, relative, absolute, and fixed. Most of the time the value that we will want to use for the position attribute for the elements in our web page is static. Since this is the default value for this attribute we don't need to specify it. The relative, absolute, and fixed values that this attribute can have are only needed in rare instances and since they do things that can't be done with tables, if you are translating a page that was laid out using tables to use CSS instead then you don't need to worry about any of them.

The various elements of your web page that are going to be positioned using CSS need to be block level elements such as <p> <div> etc. Those elements of your page that are not block elements will appear inline within the appropriate block at whatever point in the block that they end up appearing. Basically the difference between block elements and inline elements in CSS is that you can use CSS to change the appearance of inline elements but not their position while you can use CSS to define both for block level elements.

Each block level element on your page has a number of CSS attributes that can be used to determine the size of the element and how it will be placed relative to the surrounding block level elements. It is these attributes that we need to use to define how our web page will be laid out.

Each block level element has a width and height. If you don't define them then the width will default to the width available in the browser window and the height will default to whatever is necessary to allow the contents to fit. The width and height define the space that is allocated in the web page to display this element.

Each block element also has margin and padding which can be defined independently for each of the four sides of the element if you need to do so. The difference between margin and padding is that any background behind the block content will extend beyond that content to fill the padding. Also if you specify a border then it goes outside of the padding and inside the margins. The padding is added to the width and height you specify (as well as the width of any borders) in determining the true size of the element. The margins are outside of the element and define how closely this element can appear to other elements on the page (where there is no border the margins on a nested element can extend outside of its parent element and affect the spacing, also vertical margins are collapsed so that the space between two elements will be the greater of the bottom margin on the top element and the top margin on the bottom element, horizontal margins are not collapsed). Note that you need a DOCTYPE as the first tag in your HTML for IE6 to calculate widths correctly. Defining left and right margins of auto allow a block element to be centred horizontally in the browser window.

The sizes that you define for width, height, padding, and margins can either be in fixed units such as px or pt which will give you a fixed page layout, or they can be in proportional units such as em or % which will allow your page to automatically reflow based on the size of the browser window and text size selected by your visitors.

With a width and height defined, particularly if proportional dimensions are used, there is the possibility that the content of a block element will not fit the defined space. You can use the overflow attribute to define what should happen in this instance. There are three choices, the default is that the block will expand in height to allow the content to fit. If you use overflow:scroll or overflow:hidden then the block will retain its specified height and will either add a scrollbar allowing the content of the block to be scrolled to view what didn't fit or will simply hide the remainder of the content.

The default for positioning of block elements on the web page is one under the other down the page. To be able to define when elements should be placed next to one another we use the float and clear attributes. Using float:left will place the current element to the left of the page and will allow following page elements to be displayed to its right. Using float:right will display the element to the right of the page and allow following elements to display to its left. Using float on multiple elements one after the other allows them to be placed side by side across the page with their margins determining how far apart they should be placed. Of course there will also come a time when you want to ensure that an element appears below whatever has come before and to do this you use the clear:both attribute. You get even greater control by using clear:left or clear:right as they ensure that the element will go below any floated elements on that side of the page while still allowing it to go next to floated elements on the other side of the page.

Using these CSS attributes will (as I said earlier) allow you to do the layout of at least 95% of all of your web page content and certainly 100% of anything that could have been done using tables. The trick to laying out a web page using these attributes (if you can call it a trick) is to apply the attributes one at a time. Start with your HTML with no CSS and add the style attribute into the block elements of your page that you want to position. Next add the CSS attributes that I have discussed into the HTML style attribute and adjust the values until that element displays the way that you want then move on to the next block element and repeat the process. Once you have got the page appearing the way that you want, move the CSS out of the style attribute into a separate stylesheet and replace the style attribute with the id and/or class attributes that you need to be able to reference the style information from the external stylesheet. The biggest mistake that people new to CSS positioning make is that they try to do the CSS for their entire page all in one go and then wonder why it doesn't look the way that they wanted and because they did the whole thing at once they have no idea as to which attribute is the cause of their problem. Once you get used to what the combinations of stylesheet attributes do to your page layout you will then be able to start adding them to your pages all in one go rather than one at a time knowing that they will produce the placement that you want.

Just using these simple CSS attributes that I have discussed here will allow you to reproduce any page layout that can be done using tables and since it is not confined to a grid structure you can produce advanced layouts that cannot be easily produce using tables. The attributes that I have mentioned in this article are not the only ones that are available in CSS to handle positioning but the others are only needed when you want to produce even more advanced effects that cannot be done any other way.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow