HTML and CSS Reference
In-Depth Information
Strategies for your CSS layout toolbox (continued)
The Absolute Layout
We then used
absolute positioning
to get back to a liquid
layout, and this also allows us to keep our content in the order we
want. By setting the sidebar to a specific width, and positioning it
to the right of the main content, we have a main content area that
expands and contracts with the size of the page, and a sidebar that
stays fixed in size and is anchored to the right side of the browser
window. This is a great choice for layouts when you want one
part of your page to be fixed in size and one part to expand and
contract, or when you need an element to be located at a precise
location (we'll see how to do that shortly!).
The downside for the Starbuzz page, however, is that the sidebar
overlaps the footer again when the browser is wide. So we
continued in our quest for two perfect columns, and moved on to…
W
ith table display,
w
e got the even
co
lumns we wanted.
The Table Display Layout
With the
table display
layout, we hit the jackpot of layouts for
Starbuzz. We did have to add a couple of
<div>
s to our HTML
structure to get it to work right, but that paid off with two perfectly
aligned columns that expand and contract beautifully with the size
of the browser window.
In this case, the structure we added to the page was purely in
support of the layout; it didn't add any meaning to the page. You'll
find that
<div>
is often used that way (and in fact, when you get to
the next chapter, you'll see this is even more true today than it was
just a few years ago). But don't go
<div>
crazy; you want to pick
the best layout for your needs and add as few
<div>
s as necessary
to get the layout you want.
Table display layout isn't always the right choice for layout, but for
Starbuzz, it works perfectly and even let us easily expand to add a
third column for the Beverages menu. Nice!
There are as many page designs on the Web as there are
designers, but many of those designs are based on the layouts
you've learned about here (or some variation of these). You
now have several strategies in your layout toolbox to choose
from, so you're in good shape to handle just about any layout
job your boss might throw at you!
Table
display is easy to e
xpand
to mo
re columns (or row
s!).
