All Annotations of [Preview]

saved by27 people, first byMr. DiGi on 2008-06-17, last byLars Gundersen on 2008-08-15

• There are two popular approaches to positioning with CSS: float and absolute positioning. Both approaches have their pros and cons. My teammates and I have developed a new positioning approach that gives us the best of both worlds. After quite a bit of experimenting and testing, it’s time to share the technique with the rest of the world and see how we can work together to improve it. I’m calling it “faux absolute positioning” after the faux columns technique that simulates the presence of a column.
• we can avoid using cumbersome margins or padding to adjust the amount of whitespace between elements—which is a plus, since those techniques almost always require us to use IE6-specific hacks to compensate for the browser’s box model.
• It uses valid HTML 4.01 and CSS 2.1, and negative left margins are widely implemented in browsers. And there’s more good news: it works with fixed and liquid designs, it can be combined with equal height columns
• first example is a three-column liquid layout with fixed side columns
• second example is a five-column liquid design in which canvas, lines, and items are all sized in percentages
• No hacks required!