I have a question on faux columns in CSS. I recently purchased a book and trying to figure out this. its a simple 2 column layout, using an image to make sure that the height of the two columns are the same. basically the content column is set to 540 px and the sidebar column is set to 180 px. (540+180 =720) the image itself is 760 px.(which includes a white gap or "buffer" between the two columns). This therefore means that the white space found in the image amounts to 40 px. My question is where this is coming from.... is it because of the left margin specificied in the #conten? But that still doesnt make sense because 200-180px = 20px... I mean there is nothing wrong with the site.. it's just that i don't have a clear understanding of whats going on. If anyone can help, i would really appreciate it. Special thanks for those who actually attempt to figure this mumbo jumbo out. below are the necessary codes and files: CSS: /* Specify blanket rules for all elements */ body { font-size: 80%; font-family:'Lucida Grande',Verdana,sans-serif; margin: 10px;} /* Rules for headings */ h1 { font-size: 150%; } h2 { font-size: 140%; } h3 { font-size: 120%; } /* Default paragraph styles */ p { font-size: 100%; line-height: 150%; } /* Masthead */ #masthead { margin: 0 0 10px 0; padding: 10px; border: 1px solid#000; background-color:#CCC; } /* container holding sidebar_a column and content column */ #container { background:url(faux.gif) repeat-y; } /* Content */ #content { margin-left: 200px; margin-right:0; background-color:#ccc; width:540px; voice-family:"\"}\""; voice-family:inherit; width:540px; } html>body #content { width:540px; } /* Sidebar A */ #sidebar_a { float: left; padding: 10px; background-color:#999; width:180px; voice-family:"\"}\""; voice-family:inherit; width:160px; } html>body #sidebar_a{ width:160px; } /* Footer */ #footer { padding: 10px; border: 1px solid #000; background-color:#CCC; clear:both; } HTML: <html> <head> <title>Chapter 11: Classic Layouts</title> <link rel='stylesheet' media="screen" type='text/css' href='columns.css' /> </head> <body> <div id="masthead"> <h1>Masthaead</h1> </div> <div id="container"> <div id="sidebar_a"> <h2>Sidebar A</h2> <ul> <li>Item One</li> <li>Item two</li> <li>Item three</li> <li>Item four</li> <li>Item five</li> </ul> </div> <div id="content"> <h1>Content</h1> <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p> <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p> <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p> </div> </div> <div id="footer"><h3>Footer</h3></div> </body> </html> IMAGE: The image is found at http://apress.com/book/supplementDo...=10148&sID=3754 "download source"- then locate image in image folder.
See this simple two column, apparent equal height demo. It may help to make things a bit more lucid. cheers, gary