Wednesday, January 20, 2010

Section 12.34. Time for the absolute test drive










12.34. Time for the absolute test drive


Make sure you've saved the new CSS and then reload "index.html" in your browser. Let's check out the results:


Wow, this looks amazingly like the float version; however, you know that the sidebar is being positioned absolutely.


As you resize the browser, the sidebar always sits 128 pixels from the top, and sticks to the right of the page.


The main content area has a margin that is exactly the width of the sidebar, and the sidebar sits on top of that space.


And the sidebar has a 10 pixel right margin, so it has spacing between it and the edge of the page.


And we've still got a nice gutter between the two columns.


But we are now back to having a problem with the footer. When the browser gets wide enough, the absolutely positioned sidebar comes down over the top of the footer. Unfortunately, we can't fall back on the clear property this time, because flowed elements ignore the presence of absolutely positioned elements.


When the browser is wide, the vertical space of the main content area is reduced, and the sidebar can come down over the footer.












No comments: