Why are the navigation bar and home page stacking when the browser window is resized?

[Peter Morris]

I relatively new to programming and are having a layout problem with a site I am building. The test page can be seen at beta.theorganik .com

I am wondering how I need to write the css so that when the page is resized the navigation bar and the photos on the home page do not stack.

the css for the navigation bar is

 


/*Main Navigation*/


.mainNav {
	clear: both;
	margin-top: 10px;
	margin-bottom: 20px;
	padding: 6px;
}

.mainNav li {
	display: inline;
	list-style: none;
}

.mainNav a {

	font-family: Helvetica, Tahoma, Sans-Serif;
	font-size: 14px;
	color: #7a7a7a;
	text-decoration: none;
	display: block;
	float: left;
	margin-left: 35px;
	padding: 10px;
}

/*.mainNav*/

a.selected  {
	color: #3e936a;
}

The css for the home page is

div#home{
	width: 90%;
	margin: 0 auto;
}

.homeImg {
	width: 615px;
	margin: 10px auto;
}

.homeText {
	width: 645px;
	margin: 0 auto;
	font-family: Helvetica, Tahoma, Sans-Serif;
	color: #7a7a7a;
	text-decoration: none;
	word-spacing: .7em;
	text-align: left;
	letter-spacing: 6px;
	line-height: 1.1em;
	font-size: 0.8em;
}

.homeText html body {
	margin: 0 auto;
	padding: 0;
}

.homeText p {
	font-family: Helvetica, Tahoma, Sans-Serif;
	color: #7a7a7a;
	padding: 5px;
	margin: 10px;
}

Let me know if you need to see more of the code.

Thank you.

[JKing]

Can you provide a link and or the HTML?

[Peter Morris]

The site can be viewed at beta.theorganik .com