HTML and CSS Reference
In-Depth Information
If you have a liquid page design, it's likely that the liquid part will be the content—tradi-
tionally the middle section of the page—while navigation areas to the sides remain fixed. That's
all well and good, but if you want that source order (heading and content before navigation),
either you have to use absolute positioning (which we demonstrated in the fictional travel site
earlier) or you can float the content one way and the navigation the other.
Let's suppose you want the navigation to be 200 pixels wide and you want the content to
fill the remaining space. You're effectively saying that you want the content to be 100 percent
minus 200 pixels. Unfortunately, this complexity of calculation isn't within the capabilities of
CSS (although you could use some JavaScript to dynamically work this out, but that method is
not exactly tidy).
If you put the navigation first, then float that, the content will wrap around the navigation,
giving the visual effect desired. But this exercise is about making sure the content, not the nav-
igation, comes first in the source order.
You can use negative margins to achieve the effect. Let's return to the example page we
used at the beginning of this chapter. If you apply a negative margin (right or left) to one of the
outer containers, and then apply a positive margin to the same side (right or left) of the first
inner container, you can then apply floats to cause the content and navigation sections to
slide into position alongside each other. This is all a bit tricky to explain, so an example is
called for.
■
Note
Ryan Brill explains the idea behind this approach brilliantly (no pun intended) in his article for A List
Apart:
http://alistapart.com/articles/negativemargins
.
Here is the CSS and (X)HTML that achieves this aim. Note that this time we've used the
easy float clearing method to manage the float:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
➥
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Negative Margins example</title>
<meta http-equiv="Content-Type" content-wrapper="text/html; charset=ISO-8859-1" />
<style type="text/css">
body {
margin:0;
padding:0;
text-align:center;
background: #f0f0f0 url(body-bg.gif) repeat-x top;
}
#wrapper {
text-align:left;
width:770px;
margin:10px auto 0 auto;
border:1px solid silver;
}
