DM 171: Layout

<< Previous | Next >>

Layouts

Generally, there are two methods of layout; absolute positioning layout and float based layout. Each has their advantages and disadvantages.

Absolute

Absolute layout offers the utmost in precision as you choose by the pixel where you want everything positioned. It can be a great way to layout content that you know will be fixed.

It is not a good way for “fluid” layouts that expand and contract with the user’s monitor width or if your layout uses colums with a full width footer section. Here are links to an absolute position layouts, one that is mis-behaving and one fixed using overflow:auto. Remember when it was fashionable to have many random zippers on your jeans…?

The biggest problems with absolute positioning layout occurs when your content overflows your containing areas and they are not free to expand. This can also occur when someone bumps up the browser font size for ease of reading…

Float

Float based layout is very popular due to its flexibility and general support across the browsers. Floated layouts are used for this site (more correctly, were used prior to Spring 2009 redesign)! Starting an example is a great way to understand floated layout.

  • Create divs: First, create your HTML page. Then sub-divide it using divs to contain each area. This example uses six divs, an overall wrapper, header, three columns, and a footer. They have not yet been floated but have been given differing background colors and red borders for ease of view.
  • Float column divs: This example’s wrapper div is 80% wide, the column divs have been floated left and given widths of 33%. A glaring problem shows, the footer div tucks itself under the shortest column. If you play with the width of your browser, you can also make the third column jump under the second. Overall widths can “unfloat” an element if the sum of the columns (including padding, margins, and borders) become wider than the containing div.
  • Clear the footer: One way to force the footer below the longest column is to use a clearing element (see the example), in this case a div just before the footer:
    <div style="clear:both"><!-- clearing div --></div>.
    This does add content just for markup, but it is probably the easiest. There are other more elegant solutions available. This does bring up another problem: how do we make all the columns full length?
  • Equalize the columns: You can make faux columns using background graphics (as I’ve done for the DM 60A site) using various schemes or have the column backgrounds be the same color which would hide the differing lengths. Or you can use a hack…
  • Add a div to hold all the columns. This allows you to add huge padding to the bottom of each column and then remove it using the negative margin:
    { padding: 0 0 1000em 0; margin: 0 0 -998.5em 0; } Then add:
    { overflow: hidden; } to the container holding the columns.
    This fools the browser into making all the columns look the same length, see an example here.

There are many other methods of floated layout, you are encouraged to explore.

<< Previous | Next >>