• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Building Liquid Layout Struct... > Keeping the Layout from Spanning the...

Keeping the Layout from Spanning the Whole Viewport

You now have a number of liquid layout techniques to choose from in building your pages. So far, all of the examples shown have spanned the entire viewport width, but they don’t have to be set up this way. Any one of these layouts can be adapted to take up a smaller percentage of the window, using a variety of methods.

Changing Column Widths

One way to have a layout span less than the entire viewport is to simply reduce the widths of individual columns within the layout so they no longer equal 100 percent. If you’re using the floats-with-matching-side-margins method, this works only if the float is on the left. If the float is on the right, as it was in our very first example, the non-floated column will stick to the left side of the viewport in its default location, and the right-floated column will stick to the right side, together still spanning the full width of the viewport, simply with a big gap in between.

Note

The page showing this completed technique is liquid_margins_twocol_reduced1.html in the ch4_examples.zip file.


Besides changing the float direction, you’ll need to add widths to the previously width-less sidebar, header, and footer:

#header {
   width: 90%;   background: #DDDDDD;
}
#content-main {
   float: left;
						width: 65%;
   background: #F0EE90;
}
#sidebar {
   width: 25%;
						margin-left: 65%;
   background: #FFA480;
}
#footer {
   clear: both;
   width: 90%;
   background: #DDDDDD;
}

Figure 4.17. The layout now takes up only 90 percent of the viewport.


If you need the sidebar to be on the left, as it was in the original floats-with-matching-side-margins example, it will need to be the floated column, which means it will need to switch places with the main content div in the source.

If you’re floating all the columns, you’ll first want to get them all floated in the same direction. They can all be floated left or right, but this corresponds with whether the entire reduced-width layout sticks to the left or right side of the viewport, and it can look pretty odd to have it stuck to the right side. Of course, floating both columns left also means that if you want the sidebar to be on the left side of the main content column, it needs to precede it in the source. If you don’t want to make that compromise, here’s how it would work with right floats:

#header {
   float: right;
						width: 90%;
   background: #DDDDDD;
}
#sidebar {
   float: right;
   width: 25%;
   background: #FFA480;
}
#content-main {
   float: right;
   width: 65%;
   background: #F0EE90;
}
#footer {
   clear: both;
   float: right;
						width: 90%;
   background: #DDDDDD;
}

In both of these cases, the layout no longer takes up the entire viewport width, although it still adjusts in size proportionally to the viewport. However, the layouts are not centered within the viewport. There’s nothing wrong with this, but many layouts are designed to be centered. If this applies to yours, read on.

Assigning Side Margins

If you assign margins that match in width on both sides of the layout, you’re creating equally sized gaps on both sides of the layout, and that’s exactly what centering is.

Note

The page showing this completed technique is named liquid_floats_twocol_reduced1.html in the ch4_examples.zip file.


Figure 4.18. With both columns floated right, the reduced-width layout will stick to the right side of the viewport.


Taking our first reduced-width example, where the main content div was floated left and the sidebar had a matching left margin, you would apply a left margin to the main content div and increase the left margin on the sidebar accordingly. The header and footer would need margins applied to both sides:

#header {
   width: 90%;
   margin: 0 5%;
   background: #DDDDDD;
}
#content-main {
   float: left;
   width: 65%;
   margin-left: 5%;
   background: #F0EE90;
}
#sidebar {
   width: 25%;
   margin-left: 70%;
   background: #FFA480;
}
#footer {
   clear: both;
   width: 90%;
   margin: 0 5%;
   background: #DDDDDD;
}

					  

Figure 4.19. The layout still takes up only 90 percent of the viewport, but is now centered, because the extra 10 percent is split equally on both sides using five-percent side margins.


Note

The page showing this completed technique is liquid_margins_twocol_reduced2.html in the ch4_examples.zip file.


Using side margins makes it possible to keep the sidebar on the left without having to switch the source order—just switch the main content back to floating right and give it a right margin instead. To create a matching space on the left side of the sidebar, add a left margin in addition to the right margin it already has that makes room for the float:

#sidebar {
   margin-right: 65%;
						margin-left: 5%;
   background: #FFA480;
}
#content-main {
   float: right;
   width: 65%;
   margin-right: 5%;
   background: #F0EE90;
}

Figure 4.20. By switching the direction of the float on the main content div and changing the side margins on the sidebar div, you can keep the same source order but move the sidebar back to the left side.


This technique works exactly the same for a layout where all of the columns are floated. Just apply a right margin to the rightmost div, a left margin to the leftmost div, and both left and right margins to divs that span the entire width, like headers, footers, navigation bars, and other single-column items.

Often when you add side margins to a float, you’re going to trigger the doubled float margin bug in IE 6 and earlier. These browsers will double the value of the margin set on the same side that the float is facing (Figure 4.21). So, a right margin will be doubled on a right float, and a left margin will be doubled on a left float. To fix this problem, just apply display: inline to the float. It doesn’t hurt any other browsers—it’s nonsensical but semantically valid CSS, so other browsers just ignore it—so there’s no need to hide it through the use of a separate IE-only style sheet or other hack.

Figure 4.21. The five-percent right margin on the right-floated main content div is doubled to 10 percent in IE 6 and earlier, so it sits too far to the left.


There’s an even easier way to add these side margins to achieve centering: nest all the divs in a single wrapper div, and apply the margins to that div:

<div id="wrapper">
   <div id="header"></div>
   <div id="content-main"></div>
   <div id="sidebar"></div>
   <div id="footer"></div>
</div>

Although this wrapper div is not necessary for centering a layout, as we’ve seen, it often becomes necessary later when you want to apply background images to the design, so adding it at this point is not a bad idea.

When you add the wrapper, you’ll need to remove the reduced widths and the side margins of the divs nested within it, so that they fill up the entire wrapper div. Then, apply equal left and right margins to the wrapper div, using whatever unit you like:

#wrapper {
						margin: 0 5%;
						}
#header {
   background: #DDDDDD;
}
#content-main {
   float: left;
   width: 75%;
   background: #F0EE90;
}
#sidebar {
   margin-left: 75%;
   background: #FFA480;
}
#footer {
   clear: both;
   background: #DDDDDD;
}

Figure 4.22. Margin values in percentages adjust in width based on the browser window, just as width values in percentages do.


Margin values in percentages, like the five percent used here, keep the gaps proportional to the viewport.

Note

Although the code example above shows the float-with-matching-sidebar method, you can use the exact same CSS on the wrapper in layouts where all columns are floated. This technique works the same no matter what float layout method is being used within the wrapper.


Values in pixels can be used as well to create fixed-width space on either side of the layout. The layout itself still adjusts to the viewport, but it always sits a fixed number of pixels away from either side:

#wrapper {
   margin: 0 50px;
}

Note

The page showing this completed technique is liquid_margins_twocol_reduced_wrapper1.html in the ch4_examples.zip file.


Figure 4.23. Margin values in pixels create gaps of the same widths, no matter what size the window is.


Assigning a Percentage Width to the Wrapper

Another great use of a wrapper div is to set the overall width of the layout. You can simply assign a percentage width to the wrapper to constrain the entire layout to your chosen portion of the viewport:

#wrapper {
   width: 90%;
}

You don’t need to change any of the percentage values of the divs inside the wrapper, because they are relative to their parent. The 100 percent that they add up to now means 100 percent of the wrapper div, not the viewport. Thus, if your wrapper is set to 80 percent, don’t try to make the divs inside add up to 80 percent. Each time you set a width on a parent element, you’re creating a brand new yardstick for what represents 100 percent and giving the child divs a new point of reference to measure against.

Assigning a width to the wrapper does not by itself center the layout. As with all the centering examples we’ve gone through so far, you need equally sized margins on each side to do this. You could use percentage value margins again, such as 10 percent on each side of an 80-percent-wide wrapper, but to avoid adding up to 100 percent as much as possible and triggering rounding errors, a simpler way is to use the value of auto for both side margins:

#wrapper {
   width: 90%;
   margin: 0 auto;
}

Basically, this tells the browser to take up whatever space is left, and since both sides are equally set to auto, the space will be equally divided on both sides. This has the added advantage that if you later change the width of the wrapper, you don’t have to remember to change the width of the side margins as well. One less thing to change means one less chance for error, however small.

Note

The page showing this completed technique is liquid_margins_twocol_reduced_wrapper2.html in the ch4_examples.zip file.


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint