HTML Guide

Lesson 8: Layouts Part 2b - Floating

The second method for making a traditional columned website layout is floating. It's more difficult to pull off and more fragile than absolutely positioned layouts, but it has its advantages. Or... well, one advantage.

Pros of Floating

• Can perfectly emulate the look of a standard table layout if that's what you want, including a footer that stays below all columns, which helps for some image-based layouts.

Cons of Floating

• Requires extra markup.
• Can cause problems in some browsers - Internet Explorer has a tendency to expand elements unwantedly, and in a floated layout, that might break it entirely.
• Less flexible as a layout - a headache to work with as anything other than fixed-width (although everything floating can do in a liquid layout, absolute positioning can do better, so from here on I will assume that if you're making a float layout you want it fixed-width).
• Not quite as flexible source ordering.
• Harder to put margins and paddings on columns.

First things first, in order to prevent a margin appearing around the layout, you'll again want to negate the default margins and paddings on the body element:

body {
margin:0;
padding:0;
}

Now, if you're going to make a floated layout, you'll need to do a number of things. Again, I will be using the IDs of my example page. First, assuming that you want to make your layout fixed-width (which, by the way, you should pretty much never do unless you want to make something very heavily image-based), you must create an additional div with an id like layout, wrap it around everything else in the layout and then center that:

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

779px is just about the maximum width you can have in such a layout to fit it into a full-screen window on 800x600 resolution, so I recommend keeping that.

In a floated layout (by this method, at least), it is always necessary to add another containing div to the HTML if you have three columns, which should contain two of those columns. (One of those columns must be the column which you intend to be the middle column, while the other doesn't matter unless you plan to make another floated style with another column arrangement, in which case the other obviously needs to be the middle column in that style. This also means that one of these two columns must come directly after the other in the source in order for it to be possible to wrap a container around both of them but not the third column.) You could make this a #container2, for instance:

<div id="container">
<div id="container2">
<div id="content">
</div>
<div id="menu1">
</div>
</div>
<div id="menu2">
</div>
</div>

Now, in order for the columns to actually position themselves beside one another, you'll need to float the container as well. This is just how floating works in the CSS specification; if floated elements are inside a floated container, they will line up horizontally, provided there is room for them.

#container {
float:left;
width:100%;
}

Now, to position the columns, the key is that you always have two elements that are to be floated to opposite directions. First you have the second container (#container2) and the menu that is outside the second container (here #menu2); you presumably want one of them on the left and the other on the right. (If you only have two columns, you don't need the second container at all, and can simply float your two columns to opposite directions and be done with it.) Then you take the columns inside the second container and float them left and right depending on how they should be positioned within the second container:

#container2 {
float:left;
width:629px;
}

#menu2 {
float:right;
width:144px;
padding-right:3px;
}

#content {
float:right;
width:473px;
padding-right:3px;
}

#menu1 {
float:left;
width:144px;
padding-left:3px;
}

As you can see, I defined the widths and paddings of the columns here. This is extremely important, as the widths must match up correctly in order for the layout to look right. You can use any widths and paddings, as long as you make sure that #container2 and #menu2's widths and side paddings add up to at most the width of #layout, and #menu1 and #content's widths and side paddings add up to at most the width of #container2. A trick which I employed here is for better browser compatibility: Internet Explorer has a tendency to expand elements by three pixels when they contain italics, which can potentially mess up floated layouts if they leave no room around the columns. This can be combated by subtracting three pixels of left padding from right-floated columns and vice versa for left-floated columns, which will basically leave three pixels of empty space there that the column can freely expand into in an emergency.

The downside of this is, of course, that you are unable to place a sensible background on the individual columns without having a three-pixel gap appear between them, but there is no real need you would want this anyway because if you're using a float layout in general, you're usually going for an image-based layout that emulates the look of a table layout with equal-length columns all ending just above the footer. The fact is that this is impossible to do the way it happens with tables: you can't force the columns to all be of equal lengths. Instead, you must use 'faux columns': instead of placing background images on the columns themselves, place a wider background image on #container which shows the backgrounds and borders, if any, of all the columns, while defining none on the actual column divs. Since #container contains all the columns, the background image will repeat behind the columns all the way down to the footer. This method also makes it cease to matter whether the spacings in this example are gaps or actual paddings.

To place the footer, we only need to clear it: this will place it firmly below all those floated elements above it.

#footer {
width:100%:
clear:both;
}

Then you can simply put background images on (because to reiterate, you should not be using a fixed-width float layout unless you're intending to make the layout heavily image-based) to make it look all fancy. See an example here. In a realistic situation, you will of course then move on to define fonts, link styles, headings and so on.

A Note about Layouts

Layouts do not have to have a header, columns and a footer. Really. I've taught you how to do that since it's the most basic and often the most practical kind of layout, but often the best layouts are the more creative ones. Columned layouts only exist because in the times of tables, they were pretty much the only kind of layout you could make with room for large navigation menus; now that CSS is here, you have infinitely many options (the website CSS Zen Garden contains some lovely examples of all the creative things you can do with pure CSS). Don't stick to three-columned layouts just because they're the most common if you have a better idea. Explore and experiment. The layout guides are more thought as teaching you the principles behind layout-building in CSS and show you more practical examples of how positioning and floating can be used.

Previous lesson - Next lesson

Page last modified November 3 2017 at 02:03 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.