HTML Utopia: Designing Without Tables Using CSS- P10: I’ve been around the Web for a while now some might say I’ve been here from the beginning. And one thing that always bothered me about the Web was its inherent inability to disentangle content from presentation. | Achieving Full-height Columns File excerpt main2 background-image url img background-position bottom left background-repeat repeat-y If you view this page now you ll see that our full-length faux columns are almost complete as Figure shows. However the bottom of each of the columns needs a little tidying up. Figure . Our faux columns are almost complete Edit the style sheet to remove the content div s bottom border by replacing the border property with border-top border-right and border-left declarations File excerpt content margin 0 240px 0 160px border-top 1px solid b9d2e3 border-right 1px solid b9d2e3 249 Licensed to siowchen@ Chapter 9 Three-column Layouts border-left 1px solid b9d2e3 background-color white color black Also remove the border from the bottom of the left-hand sidebar by removing the border-bottom declaration from the sidebar2 rule File excerpt sidebar2 float left width 159px border-top 1px solid b9d2e3 border-left 1px solid b9d2e3 background-color white color black margin 0 padding 0 If you view your layout in the browser you should find that your columns appear to run the full length of the screen as shown in Figure . 250 Licensed to siowchen@ The Content Order Problem Figure . Full-length columns Admittedly this effect does require some fiddling around in your graphics program to prepare the background images so that they line up. However once you ve created your images the effect works very well. The Content Order Problem The floated layout we created above looks fantastic. However the absolutely positioned layout does have one point in its favor in the markup for the absolutely 251 Licensed to .
