ptg16476052426 LESSON 15: Advanced CSS: Page Layout in CSS
Remember to use the HTML5 sectioning elements for parts of the page that have that
particular meaning (section, article, aside, header, footer, and nav). If you just need to
add an HTML tag to hook your CSS styles to, that is when you should use the <div> tag,
which has no semantic meaning.
Figure 15.3 shows the new HTML page without styles applied.Writing a Layout Style Sheet
With an HTML page ready for styling, the next step is to write the style sheet. There are
several questions to consider regarding how to lay out the page.
The first is a technical question: Will you use absolute positioning for layout, or will you
use floated columns? You can get the same general layout effects from both techniques.
Absolute positioning is a little bit easier to grasp, at first, so this example uses absolute
positioning. Later this lesson, however, you’ll learn how to lay out the same HTML page
with the float property.
You need to figure out how many columns you want. There’s a slight increase in com-
plexity when you have more columns, but the specific techniques remain the same
whether you’re using two columns, three columns, or more. In this redesign, two columns
are used to avoid making the example overly complex.
Finally, you need to determine whether you are using a fixed layout or a liquid lay-
out. A fixed layout is one that defines a specific width for an entire page; for example,
it may be always 700 pixels across, and excess space in the browser simply becomesFIGURE 15.3
An unstyled page,
ready for layout.