Controlling Layout With Offsetting
| Category | : CSS | Views | : 3992 | ||
| Version | : 2.1 | Rating | : | ||
| Type | : Text | ||||
When it comes to an enclosing object, top and left are specific locations that are in relation to it. What happens if the certain element (or object) that we are talking about is not enclosed within another element? Well, then, top and left become locations that are specified in relation with something else – in this case the viewport or the browser window.
The relation that specific locations such as top and left have with other elements can be in different ways, for example: sometimes, the positioning may be within other elements – a paragraph inside a block (in other words a <p> in a <div>). In this situation specifying the location is in relation to the container element – in other words specifying top and left are in relation with the block (<div>) that will surround the paragraph (<p>). A simple example should set your mind at ease regarding all of this:
<html>
<head>
<style>
div.sidebar {
position: absolute;
background-color: #FFFFF;
top: 10;
left: 0;
width: 100px;
height: 75%;
padding-left: 10px;
padding-right: 5px;
padding-top: 7px;
font-size: 20pt;
}
div.maintext {
position: absolute;
background-color: gray;
top: 10;
left: 110px;
height: 75%;
width: 75%
}
</style>
</head>
<body>
<div class="sidebar">Fill your sidebar with whatever you wish... </div>
<div class="maintext">
</div>
</body>
</html>
Now, let us take it step by step – first of all we’ll see to the header:
div.sidebar {
position: absolute;
background-color: #FFFFF;
top: 10;
left: 0;
width: 100px;
height: 75%;
padding-left: 10px;
padding-right: 5px;
padding-top: 7px;
font-size: 20pt;
}
This is called a rule. What does this rule do? Well, first of all we see that the rule specifies exactly where a <div> should be positioned. In this case the <div> in the browser window will be placed at the upper-left corner with 10 top offset and 0 left. Notice how the height is not an absolute value, but it is specified as 100 pixels wide. Even though the height is not specified as an absolute value, we see that it is expressed as a percentage of the browser (in this case it is the browser, but most of the times is a percentage of the containing block). In this case, the sidebar div on the left side will be placed at exactly 75 percent height of the containing block.The point of all this, until now is to show you that size and position can be expressed as absolute values or as relative values (percentages), no matter if the style in which the values are contained has been defined as an absolute one. When you will test this with your own website you will see that whenever you resize your browser’s window there will always remain an exact ratio of 75 percent between the browser window and the div block.
Also, notice how the sidebar class has several padding (left, right, top) of its own. Why is this useful? Well, imagine how it would be like if elements would be butting right against the edges of different blocks (div or others). With padding you can avoid the awkward look of everything butting into the next thing. You can see on your own, by testing the script above and removing the padding.
Good luck!
 |
 |
 |
 |
 |