1. The Absolute Problem
<a better alternative />
Advanced CSS Stephen Ireland

2. Absolute control?
Absolute positioning gives you;
• Complete control over block-level elements
• Position divs where YOU want them
• Position elements related to the top-left corner of the
browser window
What possible problem could there be?
Advanced CSS Stephen Ireland

3. Fixed Block Sizes
• Too much control
• Block sizes won’t change (pixel layout)
• Content overflows - or is hidden
• Web pages becomes unreadable
But it gets worse...
Advanced CSS Stephen Ireland

4. Page Content
Pages of a website differ;
• You design a website
• It has more than one page
• Realistically, different pages will contain a different amount
of content
• Pages with more content could break an absolute positioned
layout
Advanced CSS Stephen Ireland

5. Position A Footer?
Broken
• More content forces the right- Magna autpatuer irit non
exer ad tincinc ipsusto
hand column to extend dolute eum vent velenit aut
lor in erilis acidunt aciduis
• This assumes no height has nulput ad modiamet, quisl ip
eummodolorem am, sequat
been set for the column nit nim iriuscip Em dolobor
eraessi. Rilisim dolore vent
• The position of the footer does ipit augiat, sed dolummod
dipsusciduis dolor iurero
not change odio dolobortie min eleniat.
Duipit atisl in henit ulla
• The web page becomes difficult commy nim voluptatet, con
utpat, conullan ullam del ip
to read / layout is broken estie ver sectem venibh
Advanced CSS Stephen Ireland

6. What’s The Answer?
Relative positioning
• Position block-level elements relative
to one another
• The can resize in harmony
• No fixed heights - no problem
• Web pages stay readable
• Layout degrades gracefully
Advanced CSS Stephen Ireland

7. Relative Positioning
Possible downside?
• Relative positioned layouts can be more difficult to achieve
• CSS rendering bugs in older web browsers (namely versions
of Internet Explorer) cause display issues - be aware of
them
• Workarounds can be difficult to understand
Browser bug reference: www.positioniseverything.net
Advanced CSS Stephen Ireland

8. Position: Relative;
Keep it simple
• The fewer block-level elements involved, the better
• Try setting widths, but not heights
• Cannot use properties:
• top:
• right:
• bottom:
• left:
Advanced CSS Stephen Ireland

9. Floats
Keep it simple
• Float elements relative to a containing element
• Element can be floated left or right
• Float: left; or Float: right;
• A floated block-element will need a width
Advanced CSS Stephen Ireland