HTML Guide

Lesson 7: Layouts Part 2a - Absolute Positioning

Yes, absolute positioning - what I used to create the layout for our old example page, but which I will now cover in more detail to make a more traditional website layout.

The first thing you should know is that absolute positioning is not always right to use. Let's first look at the pros and cons of using it:

Pros of absolute positioning

• Requires no extra markup for styling purposes (although when going with fixed-width, adding an extra div will make things easier).
• Works perfectly in all browsers in use today.
• Reliable even if the content of the page is, say, particularly wide or otherwise exceptional.
• Highly flexible.
• Columns can have a fixed width in any unit or one of them can be liquid (stretch to make the layout fill the user's browser window).

Cons of absolute positioning

• It is impossible to have a footer always at the bottom irrelevant of which column is longest. A footer will have to simply come below the content if one is used, and then it will not necessarily be below the lower edge of the menu(s). This can (but does not necessarily if this is kept in mind during the designing process) make things difficult for image-based layouts.

Most of my own styles use this basic absolute positioning technique.

If absolute positioning is what you're going for, now it's just getting to what you're going to do with your stylesheet. I'm using my example page's IDs and such; you replace them with yours, of course, and adjust it to whatever column structure you might be using.

Firstly, let's assume this layout is going to be liquid (that means it will fill the user's browser window completely) and we don't want it to leave a margin around the layout. Then we need to negate the default margin and padding on the body:

body {
margin:0;
padding:0;
}

Now, we want the tops of the columns to align themselves with the top of the column container, and since we're going to be absolute positioning them, we need to give the container position:relative:

#container {
position:relative;
}

If you are going with fixed-width (only recommended if you want to make an image-based layout that won't work well in a liquid layout), to make things easier you'll most likely want to wrap the entire layout and all of the divs in another div with an ID of maybe layout, and give that a fixed width and, if you want to center it, margin:auto:

#layout {
width:779px;
margin:auto;
}

(From what I've heard, 779px is the best width for fixed-width layouts, as it should fill the entire viewport, minus scrollbar, in a full-screen window browser on 800x600 resolution, the smallest resolution still in widespread use today - around 5% of my visitors use it, which is not much but still enough to be somewhat significant.)

The key to the absolute positioning method is what you do with the columns. Since here it's going to be the middle column that stretches, we'll take the other two and absolutely position them on the left and right with the widths we want (defined in pixels for the sake of the example, but you can of course use any other unit; I myself like to use em since they will then resize if the user changes their font size):

#menu1 {
position:absolute;
top:0;
left:0;
width:150px;
}

#menu2 {
position:absolute;
top:0;
right:0;
width:100px;
}

And then, for the liquid column, we simply add left and right margins so that it won't disappear underneath the menus. If we had only one menu, we would give the menu an absolute position and then give only one left or right margin to the content; if we had more than two menus, we would absolutely position them next to one another and then give the content margins consisting of the widths of the menus on that side put together. To separate it from the footer, we might also want to give it some bottom margin or padding, depending on how we are going to work with backgrounds in the layout:

#content {
padding-bottom:3em;
margin-left:150px;
margin-right:100px;
}

Simple and effective. But what about the footer, which will now disappear underneath the menus if they are bigger than the content? Here we come to the problem of absolutely positioned layouts - it is impossible to move the footer to be below all the columns whichever one is longest, and instead we have to settle for a footer that comes directly under the content. To prevent the footer from going under the menus as well, we give it the same left and right margins as the content:

#footer {
padding-top:3em;
margin-left:150px;
margin-right:100px;
}

If you want the footer and its background to stretch across the entire bottom but the text to be restrained to the content area (my Articuno Snowflake style does this, for example), you'll want to replace the left and right margins with paddings of equal widths.

And essentially, that is all there is to the absolutely positioned layout. You'll want to add some colors, backgrounds, borders and paddings in a realistic situation, of course (remember to increase the margins on the content and footer accordingly if you put padding on the menus, but padding the content, header or footer will not change anything in the layout). You'll also probably be defining fonts, how the headings and links should look and so on.

For an example of how this will basically structure the columns of our example page, with its main divs colored with some placeholder colors, see this page.

Previous lesson - Next lesson

Page last modified April 11 2023 at 23:29 UTC

Comments

No comments on this page as of yet.

Post comment

Name

E-mail

Website address

Website name

Comments

Please type the name of the above Pokémon into this box: Fun fact: The above sprite has a 1/8192 chance of being shiny. Feel free to brag if you get one.