24.2. Two-Column LayoutsMulticolumn 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 FloatsThe 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 layoutThe 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: 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 PositioningYou 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 positioningThis 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 LayoutsThese examples demonstrate the basics of formatting columns with CSS. For additional information, I recommend these online resources:
|