Section 24.2. Two-Column Layouts


24.2. Two-Column Layouts

Multicolumn layouts that once required HTML tables are now achievable using CSS alone. Column layouts can be done using floats or absolute positioning (see Chapter 21 for details on both).

Of course, there are endless variations on two-column layouts in terms of page components, measurements, backgrounds, and so forth. The examples in this section represent just a few very basic possibilities. They reveal the general strategy for approaching two-column designs and should serve as a good head start toward implementing your own layouts. It should be noted, however, that they are based on the assumption that the main content column will be longer than the side columns. If your side columns are longer, it may be necessary to make adjustments to the code examples shown here.

24.2.1. Using Floats

The markup and styles in this example produce a page with a header area, a main column of content, a sidebar of links, and a footer for copyright information, as shown in Figure 24-2.

This markup provides the necessary elements for the two-column layout . The masthead and footer are optional and could be omitted for a minimal two-column structure.

     <div >     Masthead and headline     </div>           <div >     Main article     </div>>           <div >     list of links     </div>           <div >     copyright information     </div> 

Figure 24-2. Two-column layout


The source document has been divided into four divs, one each for the masthead, content, sidebar, and footer. The content has been placed before the sidebar in the source document so that it is accessed first by users with non-graphical browsers. That means that we can't float the sidebar because it will not float above the preceding block element to the top of the page. Instead, the main content div is floated to the left and set to 70% of the page width, and the sidebar div flows around it. The style rules that take care of the floating are provided here:

     .masthead {         background: #CCC ;         padding: 15px ;}           .main {         float: left;         width: 
70%
;
margin-right: 3%; /* adds space between columns */ margin-left: 3% ; }   .footer { clear: left; /* starts the footer below the floated content */ padding: 15px ; background: #666 ; }

A right margin is applied to the main content div to add some space between the columns. Padding and a border could be added as well to clarify the division between columns. Of course, this is just the minimal styling to set up the column framework. Additional styles would likely be added to format the content on the page.

24.2.2. Using Absolute Positioning

You can also use absolute positioning to create a multicolumn page. This method absolutely positions the sidebar div element in its place on the right side of the page and gives the main content div a right margin wide enough to make a space for the newly positioned box. With absolute positioning, the order of the source document is not as critical as it was in the float method, because boxes can be picked up and placed anywhere. However, absolutely positioned elements can overlap one another, which isn't an issue with floating.

This example starts with the same markup as before, but places the sidebar on the right using absolute positioning. The resulting layout is shown in Figure 24-3. Again, the masthead and footer elements could be omitted for a simple two-column format. This example uses percentage width values to create a fluid design that resizes with the browser window.

     <div >     Masthead and headline     </div>           <div >     Main article...     </div>>           <div >     list of links     </div>           <div >     copyright information     </div> 

Figure 24-3. Two-column layout with absolute positioning


This is the style sheet that positions the elements as shown in Figure 24-3. Comments throughout explain the effects of significant rules.

     body {margin: 0; padding: 0;}  /* clears default spacing around the page */           .masthead {         height: 70px ;         background: #CCC ;}           .main {margin-right: 30% ;  /* makes room for the positioned sidebar */         margin-left: 5%;  }           .sidebar {         position: absolute;         top: 70px ;    /* places the sidebar below the masthead */         right: 0px ;    /* places it against the right edge of the window */         width: 25% ;          background: #EEE ;}           .footer {         padding: 15px ;         background: #666 ;         margin-right: 30% ; /* keeps the footer aligned with content */         margin-left:  5% ; } 

Notice that in this example, the margins applied to the main content were also applied to the footer element. That is to prevent the footer from being overlapped by a long sidebar.

24.2.3. More Two-Column Layouts

These examples demonstrate the basics of formatting columns with CSS. For additional information, I recommend these online resources:


From Table Hacks to CSS Layout: A Web Designer's Journey, by Jeffrey Zeldman (www.alistapart.com/articles/journey)

Join Jeffrey Zeldman through the trials and tribulations of converting a table-based layout into a CSS-based design.


Creating Liquid Layouts with Negative Margins, by Ryan Brill (www.alistapart.com/articles/negativemargins)

In this demonstration, Ryan creates a two-column layout using negative margins to make way for the sidebar element. It is testament to the fact that CSS design problems come with many solutions.




Web Design in a Nutshell
Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))
ISBN: 0596009879
EAN: 2147483647
Year: 2006
Pages: 325

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net