Ok- hope someone can help, as this is driving me nuts! I have 2 divs, left-floated within a wrapper div. The rigth side div is set to overflow:auto. The content correctly shows up with a scrollbar at most sizes. However, when I make the page narrower, it falls to the next line, instead of making the div narrower- why? Now, I realise I can set a min page width to stop this from happening, but right now that would have to be set at something like 1300px, which seems too wide to me for a min width. But I don't understand why the right div would fall to a new line instead of just getting narrower? Here's a link to the page if you want to try it out: http://portraits.carissalyn.com/ Here's my css:
#header {height:60px;} body,html{min-width:1000px; height:100%; margin:0; padding:0; min-height:600px;overflow-y:hidden;overflow-x:auto; width: 100%; } body { font-family: Arial; background-color: #B8B8B8;}#wrapper {max-width:1200px;background-color: #B8B8B8;min-height:600px;height: 100%; color: #B8B8B8;margin-left: auto;margin-right: auto;white-space: nowrap;} #logo{float:left;color:#fff;width:200px;padding: 75px 15px 15px 0px;}#content {float: left;max-width:80%;color: #000;overflow:auto;} .table {margin:auto; padding: 10px;}.table td { padding: 5px; font-family: arial, sans-serif; text-align:center;color: #cccccc; font-size: 120%;}.table th { padding: 5px; font-family: arial, sans-serif;}
and here's the html:
<!DOCTYPE html><html lang="en"><head><title>Carissa Lyn Photography</title><link href="site_style.css" rel="stylesheet" type="text/css" media="screen"> </head><body><div id="header"></div><div id="wrapper"> <div id="logo"><img src="images/logo_design.png" alt="logo"></div> <div id="content"> <table class="table"> <tr> <td><img src="images/photo1.jpg" alt="portrait"></td> <td><img src="images/photo2.jpg" alt="portrait"></td><td><img src="images/photo3.jpg" alt="portrait"></td> <td><img src="images/photo4.jpg" alt="portrait"></td><td><img src="images/photo5.jpg" alt="portrait"></td> <td><img src="images/photo6.jpg" alt="portrait"></td> </tr> </table> </div> </div> </body></html>