back

Creating a page in HTML and CSS is a lot like baking a cake.

You will always make a batter and put it in an oven, but there are still endless varieties. And when you have chosen one, there is always more than one way of creating it.

For this reason, it seems like a good idea to find out which technique is worth learning first if you are just starting out with CSS. And it also seems like a good idea to figure out which task is the very most important one that you can apply this technique to.

In order to qualify as the single most important technique in CSS, a technique would have to be the most useful in the widest range of the most important situations. And since web sites have so much in common, there are several tasks that have to be done no matter what kind is being made. So which is the most important of these?

Setting up an HTML file is important but which type you chose doesn't have much impact. Chosing a layout is extremely important but varies strongly so it cannot be narrowed down to a single decision. Chosing the way you structure your HTML, however, is vital because it limits the types of graphical layouts you can accomplish. If you use a technique that is both simple and flexible, you will be able to accomodate the most graphical layouts any single technique can, so your learning will be most effective.

To accomodate your content, you need at least one HTML element that expands with whatever content it contains. To accomodate layout, you need one or more additional elements that can be positioned anywhere. It is also common to have a header, and a footer.

You can use a DIV element without any additional CSS to accomodate the content, and you can add position:absolute to additional DIV elements to accomodate the layout bits. But this approach does not offer the most flexibility, because there is no way to move the layout bits all at once, or allow their position to adapt to the content above them.

This can be accomplished by setting the content DIV position:relative, and placing all the layout bits within it. This way, all the layout bits move with the content DIV, but they can stilled be positioned anywhere.

I like to call this technique RAP: Relative/Absolute positioning.

HTML:

<div id="header"></div>
<div id="container">
  <div id="menu"></div>
  <div id="content"></div>
</div>
<div id="footer"></div></pre>

CSS:

#container {
  position: relative;
  width: 796px;
  margin: 0 auto; /* Center the container */
}
  #header, #footer {
  width: 796px;
  margin: 0 auto;
}
  #menu {
  position: absolute;
  width: 188px;
  top: 0;
  left: 0;
}
  #content {
  width: 608px;
  margin-left: 188px;
}