ptg16476052294 LESSON 11: Using CSS to Position Elements on the Page
flow. The catch is that there will only be adjacent blocks to the left or right of elements in
the normal flow if they are floated.Positioning Properties and Height and Width
You’ve already seen that you can specify the size of an element using the height and
width properties. You can also specify the size of an element if you use more than two
of the positioning properties, or only two properties if those two properties are left and
right or top and bottom. When you specify the position of two parallel sides of a block,
it establishes a height or width for that block. If you specify the positions of all four
sizes, you specify both the height and the width of a block.
Here’s a style sheet for a page with positioned <div> elements:
<style type="text/css">
body { background-color: #aaaaaa; }
div {
background-color: white; border: 2px solid black; padding: 10px;
}#pos {
position: absolute;
left: 50px;
top: 50px;
}#pos2 {
top: 160px;
left: 75px;
bottom: 75px;
right: 100px;
position: absolute;
overflow: hidden;
}#pos3 {
position: absolute;
width: 50%;
height: 50%;
bottom: 0px;
right: 0px;
}
</style>The resulting page is shown in Figure 11.4.