NikMac

EDIT: Found I can solve the first problem using media queries and decided to take another approach to the second by setting the image as a background to a <div> container. Hi, I've been working on a layout for a new website and have tried following along with this ALA article: http://alistapart.com/article/fluidgrids I've been poking around on Google all day and haven't been able to solve these issues: The First Problem: I have a three-column layout with percentage widths. When the browser window size is reduced horizontally, the three columns should stack underneath each other. I.e. column 3 should move underneath the first two columns, and if the window size is further reduced then column 2 should appear underneath column 1 and column 3 should appear underneath column 2. Currently the columns just overlap each other and it looks messy. I've tried adding a min-width value to each of the .three-col-n classes but either that doesn't work or I am not doing it correctly. Here is the relevant code: <main> <section> <p>Full-Width Section 1</p> </section> <section> <p>Full-Width Section 2</p> </section> <section id="three-col-container"> <article class="three-col-1"> <p>Column 1</p> </article> <article class="three-col-2"> <p>Column 2</p> </article> <article class="three-col-3"> <p>Column 3</p> </article> </section> </main> main { margin:3.125em auto; /* 50px / 16px = 3.125em */ padding:1em 0.625em; /* 10px / 16px = 0.625em */ max-width:60em; /* 960px / 16px = 60em */ background:#ffffff;#three-col-container { clear:both; overflow:hidden; width:100%; padding:0;}.three-col-1 { margin:1.702% 1.064% 1.702% 0; width:31.914%; /* 300 / 940 = 0.31914 */ min-width: 10.638%; /* 100 / 940 = 0.10638 */ float:left;}.three-col-2 { margin:1.702% 1.064%; width:31.914%; /* 300 / 940 = 0.31914 */ min-width: 10.638%; /* 100 / 940 = 0.10638 */ float:left;}.three-col-3 { margin:1.702% 0 1.702% 1.064%; width:31.914%; /* 300 / 940 = 0.31914 */ min-width: 10.638%; /* 100 / 940 = 0.10638 */ float:left; } The second problem: The logo in the header should increase its size appropriately when the browser text size is increased. Currently the text will increase in size but the image stays at its native dimensions. However, if the text size is decreased, the image will shrink correctly. I've tried following the advice here (haven't added the IE fix to this version yet): http://unstoppablerobotninja.com/entry/fluid-images but it seems I'm just too confused right now. Any suggestions? The relevant code again: <header id="page-header"> <div id="header-wrap"> <div id="logo" class="inlineblock"> <img src="images/logo.gif" alt="logo"/> </div> <!-- logo --> <nav id="mainnav" class="inlineblock"> <ul> <li><a href="#" title="Features">FEATURES</a></li> <li><a href="#" title="Support">SUPPORT</a></li> <li class="noborder"><a href="#" title="Contact Us">CONTACT</a></li> </ul> </nav> </div> <!-- header wrap --> </header> html {font-size:100.01%;height:101%;}body { height:100%;font: 100%/1.5 Tahoma, sans-serif;background:-moz-linear-gradient(top, #0000FF, #00BFFF) no-repeat #00BFFF;background:-webkit-gradient(linear, left top, left bottom, from(#0000FF), to(#00BFFF)) no-repeat #00BFFF;color:#333;}/* Fluid Images */img, embed, object, video { max-width: 100%;}.inlineblock {display:inline-block;}#page-header {height:3.125em;line-height:0.87;background:#ffffff;width:100%;overflow:auto;}#header-wrap {margin:0 auto;padding:0 1em;max-width:60em;} /* 960px / 16px = 60em */#logo {width:15.417%;} /* 148px / 960px = .15417em */#page-header img {padding:0.0625em 0;} /* logo vertical alignment */ Thanks in advance for any advice you can offer. I think I've had enough wrestling with CSS for one day..