Jump to content

Div falls to new line- why?


Recommended Posts

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>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...