Professional Web Design: Techniques and Templates, Fourth Edition

Creating a Liquid Design 437
When the page is rendered, it would look like Figure 16.13. Notice that there is
an even amount of space on both sides of the design.
Creating a Liquid Design
Because of the way the fixed design was created, modifying it to be a liquid design
is very simple. All the designer needs to do is change the 770px value of the
a5-body rule to 100%. This is because the left column will always try to fill the
screen because it is assigned relative positioning and it is included in a tag,
which together defaults to 100% width. There are two main reasons the design
works the way it does:
■
■
The left column has relative positioning assigned to it, so it can expand and
contract, depending on the resolution or width of the screen.
While the positioning will stretch to 100% by default, it can also be controlled
with the margin property. In this case, the margin-right property is
set to 232px, which means the column will stretch within 232 pixels of the
right side of the screen but no further.
Figure 16.13
Fixed-width design that is centered using CSS.
Game Developing GWX