Section 11.3. Float Layout Basics

11.3. Float Layout Basics

Float-based layouts take advantage of the float property to position elements side by side and create columns on a Web page. As described in Chapter 7 (Section 7.6), you can use this property to create a wrap-around effect for, say, a photograph, but when you apply it to a <div> tag, float becomes a powerful page-layout tool. The float property moves a page element to one side of the page (or other containing block). Any HTML that appears below the floated element moves up on the page and wraps around the float.

Figure 11-2. You have several ways to deal with the uncertain widths of Web browser windows and browser font sizes. You can simply ignore the fact that your site's visitors have different resolution monitors and force a single, unchanging width for your page (top), or create a liquid design that flows to fill whatever width window it encounters (middle). An elastic design (bottom) changes width only when the font sizenot the window widthchanges.

The float property accepts one of three different values left, right , and none . To move an image to the right side of the page, you could create this class style and apply it to the <img> tag:

 .  floatRight { float: right; } 

The same property applied to a <div> tag full of content can also create a sidebar:

 #sidebar {     float: left;     width: 170px; } 

Figure 11-3 shows these two styles in action.

---

Note: The none value turns off any floating and positions the element like a normal, unfloated element. It's useful only for overriding a float that's already applied to an element. You may have an element with a particular class such as "sidebar" applied to it and that element floats to the right. But on one page you may want an element with that class to not float, but to be placed within the flow of the page, like this Note box. By creating a more specific CSS selector (see Section 5.3) with float: none , you can prevent that element from floating.

---

Figure 11-3. You can use the float property to lay out a Web page with multiple columns. On this page, a block of content is floated to the left edge. The sidebar has a set width, but the main content doesn't, which makes this design a liquid layout (Section 11.1). The main section of the page simply expands to fill the width of the browser window. In the upper right, the bathtub photo is floated to the right.

A simple two-column design like Figure 11-3 requires just a few steps:

1. Wrap each column in a <div> tag with an ID or class attribute .

   In Figure 11-3, the news items listed in the left sidebar are wrapped in one <div> <div id =" news"> and the main content in another div <div id="main"> .

2. Float the sidebar <div> either right or left .

   When you work with floats, the source order (the order in which you add HTML to a file) is important. The HTML for the floated element must appear before the HTML for the element that wraps around it.

   Figure 11-4 shows three two-column layouts. The diagrams on the left side show the page's HTML source order: A <div> for the banner, followed by a <div> for the sidebar and, lastly, a <div> for the main content. On the right side, you see the actual page layout. The sidebar comes before the main content in the HTML so it can float either left (top, bottom) or right (middle).

   Figure 11-4. Creating a two-column layout's a simple matter of floating a <div> tag to the left(top). To make a sidebar move from the left to right side of the page (middle), just change the sidebar's CSS styling to float: right. You don't need to make any other changes to your CSS or HTML.

   

3. Set a width for the floated sidebar .

   Unless you're floating an image with a predefined width, you should always give your floats a width. In this way, you create a set size for the floated element, letting the browser make room for other content to wrap into position.

   The width could be a fixed size like 170px or 10em. You can also use percentages for a flexible design that's based on the width of the browser window. (See Section 11.1 for more about the pros and cons of the different measurement units.) If the sidebar is 20 percent wide and the browser window is 700 pixels wide, then the sidebar will be 140 pixels wide. But if your visitor resizes the window to 1000 pixels, then the sidebar grows to 200 pixels. Fixed-width sidebars are easier to design for, since you don't have to consider all the different widths the sidebar might stretch to. However, percentages let you maintain the same proportions between the two columns, which can be more visually pleasing.

   ---

   Note: When the overall page design is a fixed width (as described in Section 11.1), percentage width values for the sidebar are based on the fixed-width containing element. The width isn't based on the window size and won't change when the browser window changes size.

   ---

4. Add a left margin to the main content .

   If the sidebar's shorter than the other content on the page, the text from the main column wraps underneath the sidebar, ruining the look of two side-by-side columns (see Figure 11-18 for an example). Adding a left margin that's equal to or greater than the width of the sidebar indents the main content of the page, creating the illusion of a second column:

    #main { margin-left: 180px ; } 

   
   

   By the way, it's usually a good idea to make the left margin a little bigger than the width of the sidebar: This creates some empty spacea white gutterbetween the two elements. So, when you use percentages to set the width of the sidebar, use a slightly larger percentage value for the left margin.

   Avoid setting a width for the main content div. It's not necessary, since browsers simply expand it to fit the available space. Even if you want a fixed-width design, you don't need to set a width for the main content div, as you'll see in the next section.