Tutorial 24: Fixing Frames with Fixed Positioning - HTML with Style | 5

Tutorial 24: Fixing Frames with Fixed Positioning

Positions, Everyone

There are six CSS properties that are essential to positioning elements. The first group is the four properties top, bottom, left and right. The second group is the two properties width and height.

There is a slight difference between the first group and the second group: top, bottom, left and right set the distance between the edge of the containing block and the outer or margin edge of the element (i.e. the bit surrounding the contents, padding, border and margin), while width and height set the distance between the content or inner edge of the element.

In order to position an element, you usually have to supply at least two of these properties in every dimension. For instance, if we want to horizontally position the navigation element to occupy the entire width of the viewport, we can either set left to 0 and width to 100% or set left to 0 and right to 0. The default values for all of these properties is auto which basically means that the browser will position the element according to those properties you have set explicitly and scale one of the ones left as "auto" to fit the element into the space available.

Seen like this, it seems that there is no difference between setting left and right and setting left and width. However, it does matter if you want to set the margin, padding or border of any of these elements to any value other than 0.

Let me illustrate this with an example. For the moment, let's ignore the page header and footer, and try to position the introduction and main section. We'll start with the following style sheet:

#intro {
 position: fixed;
 top: 0; left: 0;
 width: 25%; height: 100%;
}
#main {
 position: fixed;
 top: 0; right: 0;
 width: 75%; height: 100%;
}

This positions the two boxes by setting the positions of one of their corners (using top and left for the first box and top and right for the second box) and explicitly setting their widths to respectively 25% and 75% of the containing block (in this case, the viewport).

If you view the results (warning: you will need a recent build of Gecko for this example to work), you will see that the two sections are indeed placed side by side on the viewport, with the left column occupying 25% of the width and the right column occupying 75%. However, the text in the two columns is placed too close, rendering the page unreadable. So let's insert some padding and a border to separate the text from the edge of the viewport and the text beside it, like so:

#intro {
 position: fixed;
 top: 0; left: 0;
 width: 25%; height: 100%;
 padding: 0 1em;
 border-right: 1em solid #ACA250;
}
#main {
 position: fixed;
 top: 0; right: 0;
 width: 75%; height: 100%;
 padding: 0 1em;
}

You can draw your own conclusions by viewing this example. Let me give you a hint: I believe the word you're looking for is "Yuck." The right column is obscuring part of the left column. This is because the width of the left column's contents is still 25% of the viewport's width, but the width of its entire box is 25% of the viewport's width (the content width), plus 1em (the left padding), plus another em (the right padding), plus another em (the right border). The width of the right column, on the other hand, is now 75% of the viewport width, plus 2em of padding.

Since this adds up to 5em more than the viewport width, the two columns are placed over each other in order to fit them into the viewport. How do you solve this problem?

Next Page...

https://www.internet.com/

URL: https://www.webreference.com/html/tutorial24/4.html

Produced by Stephanos Piperoglou
Created: August 24, 2000
Revised: August 29, 2000