Lesson 3: Working with CSS properties CHAPTER 4 185
left: 30px;
width: 450px;
height:400px;
}#div3 {
background-color: lightpink;
position: absolute;
top:0px;
left: 0px;
width: 33%;
height:100%;
}#div4 {
background-color: orange;
position: absolute;
top:0px;
left:33%;
width:33%;
height:100%;
}#div5 {
background-color: lightblue;
position: absolute;
top: 0px;
right: 0px;
width:33%;
height:100%;
}#div6 {
background-color: lightgray;
}
In this example, div2 has an explicit width set to 450 pixels, and its height is set to 400
pixels. The top and left properties of div3 are set to 0 pixels. These settings are relative to
div2. The width of div3, div4, and div5 are set to 33 percent, which is relative to div2’s width.
The height of div3, div4, and div5 are set to 100 percent, which is relative to the height of
div2. The left property of div4 is set to 33 percent instead of 150 pixels, which means that you
can change the width of div2, and the columns will be automatically sized and positioned. The
result is shown in Figure 4-17.
One of the problems with this solution is that the height of div2 is fixed at 400 pixels, and
changes to the content of div3, div4, or div5 can result in a large gap at the bottom or clip-
ping of the text at the bottom. This might be acceptable in some scenarios, but div6 is still at
the top. You might want the columns to grow and shrink dynamically and div6 to be placed at
the bottom of the columns, even as the column height changes. The use of the float property
can solve this problem.