This web site is about Cascading Style Sheets as a means to separate the presentation from the structural markup of a web site, and it will help you answer some of those frequently asked Questions, explains some of the Basics of CSS, gives you tips and tricks for tackling the problems with Netscape 4, offers you a tutorial about Positioning with CSS (CSS-P, web design without tables). There is also a page with interesting Links.
This page uses CSS to present the content in the best possible manner. If you can see this message, then CSS (or JavaScript) is not enabled in your browser, and the page will not appear as the designer intended.

Positioning the elements: the Main Area

We declared the area for the Navigation as absolutely positioned, because we see it as the "anchor point" for the site. The class "Content" receives the positioning only via the margins. This means it uses neither the relative nor the absolute positioning, but is in the regular flow of the HTML document like any other HTML element:

.Inhalt {/*this is the main content area*/
    background: #FFFFFF;
    /*declare a color together with a contrasting background color*/
    color: #000088;/*to insure readability*/
    margin-left: 160px;
    /*to position the content area to the right of the navigation*/
    margin-right: 20px;/*breathing space for the text*/
    padding: 5px;/*space to separate navigation and content*/
    font-family : Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif; 
    width: auto;
    border: 0.1px solid #FFFFFF; 
   /*to insure that NN4.xx renders the background-color of the content area*/
    }

Back to the Top

Let's take a closer look: background(-color) and (text)color are white and dark blue, for better readability.

The left margin is defined with 160px from the left corner of the window, to insure that there is enough space between the navigation (with 145px width and 5px position to the right from the window = 150px) and the content. The margins of a box are always transparent. By declaring the margin-left property to be 160px wide, we give the visual "illusion" of an area that starts at 165px from the left, where in reality it is as wide as the HTML document. That's what I meant with "cunning application of the rules".

There is also the declaration for the right margin, and this defines that the right margin is 20px to the left of the right margin - wherever the right margin of the window actually is.

Additionally, there is a 5px padding all around the inside of the Content box (not really necessary. We could declare the margins to 165px and 25px, would have the same effect...)

The font-family I want to be displayed in the Content class - We already declared that in the <BODY>, but the real-world issue of the flawed inheritance capabilities of certain browsers requires some redundancy...

{width: auto;}: "auto" is the default value for the width property and refers to the width of the containing block. In this case it is not even necessary to set the width, because the .Content class is defined by the declaration of the left and the right margin. But should we decide to add a third "column", for a picture perhaps, then this could come in handy.

Back to the Top

Now something strange: border: 0.1px solid #FFFFFF;. This is more of an insurance to force NN 4.xx to display the background-color over the whole Content area. If we decide to change the background-color of the Content area to a light grey, for example, and don't have this fall-back declaration in the style for this area, then NN 4.xx will render the light grey background-color, but only behind the text.

Try it! Copy the declaration for the .Content into your stylesheet, apply the class in your document, like:

<body>

<div class="Navigation">
ABCDE
</div>

<div class="Inhalt"></div>

</body>

copy and paste some text in the Content class of your document, and change the background: #FFFFFF; of the .Content class into background: #F0F0F0;. Take a look at it in NN 4.xx - no problem.

Now delete the border: 0.1px solid #FFFFFF; and take another look at it in NN 4.xx ... Isn't it wonderful that there is a possibility to "undo"? I love this feature.

So: we have the body, navigation and the main area defined. See an example (with the styles in the <head> section).

We can change the colors, the position and the dimensions of both the navigation and the content areas.

We now only have to position the header and the footer, and this is what we do in the next chapter.