Absolute Or Float Layout

From CSS Discuss

Jump to: navigation, search

Pros and Cons of Absolute vs Float Page Layout

Absolute Positioning Layout (using "position:absolute")

  • Pros
    • Precise positioning of elements in relation to their nearest positioned ancestor.
    • Allows you to create a page where the order of the information in the HTML is completely different than the order things appear on the page, i.e. navigation columns can be pushed down to the end of the HTML code but still appear as the left column of the page.
  • Cons
    • Because absolutely positioned elements are no longer in the document flow, it is harder to line them up with other page sections. There is no way to instruct other parts of the page to start or end with respect to the absolutely positioned element, instead you must allow enough room in the design for both the maximum and minimum size that the element could ever have.
    • Possibility of overlaps.
    • If you don't know which column will be longest, you can't have a footer that spans all the columns.

Float Layout (using "float:left" or "float:right")

  • Pros
  • Cons
    • Tied to the document flow. Allows less flexibility.
    • Lots of browser bugs, that, although possible to get around, add significantly to browser testing and tweaking time.


See also: Css Positioning

Personal tools