[CSS] nested layers and text

[arch13]

I have a page located at http://www.arch13.com/index.php?id=brewery where the included page brewery is soley CSS based. It's been giving me issues with a nested layer and text indenting, and I was hoping someone could point out what I'm doing wrong.

The actual page, located at www.arch13.com/brewery.php , is the focus here.
The page is constructed by creating a wrapper div that contains all the visable divs (Got that?) The wrapper div sets the total height and width and all the other layers are then nested within. The first layer is photo_image and is where the actual image is displayed.
Then, I have photo_nav where the image description and navigation goes. This is where my problem is.
photo_nav has photo_subnav nested in it.

The actual code looks like:

<div class="photo_nav">
    <div class="photo_subnav">< 1/12 ></div>
    Crasnton, RI - Built in 1853 as the Providence Trolley house. Used as the 
    repair shop and storage shed for trolleys until 1923 when the city shuttered 
    their traction car system. It was then converted to the Cranston Brewery under 
    which it operated until the company went under in the late 70's.</div>
  </div>

Subnav being where you click to advance to the next image.
The actual CSS dictating the page is:

.wrapper {
	height: 480px;
	width: 640px;
	margin:0px auto;
	text-align:center;
	padding-top:0px;
	border:1px #fff;
}
.photo_image {
	height: 440px;
	margin: 0 0 0 0px;
	background-color:#BFCCE3;
	remove--->
	font-family: Verdana;
	font-size: 11px;
}
.photo_nav {
	height: 40px;
	margin:0 0 0 0px;
	text-align:left;
	padding:0px 0px 0px 5px;
	border-top:2px solid #ccc;
	background-color:#666;
	font-family: Verdana;
	font-size: 11px;
}
.photo_subnav {
	width: 55px;
	height: 40px;
	background-color:#660000;
	padding:0px 0px 0px 0px;
	float: left;
	color: #FFFFFF;
	}

Now what's killing me is that I want to have photo_subnav only nested in the left corner of photo_nav. I acheived this through float. Please see the linked page, as the red areas is the photo_subnav floated left.

Now, How can I have a margin area between the subnav red box and the text? And how can I have multipule pharagraphs without the new paragraph starting under the subnav red box instead of inline with the previous paragraph?

[Ripsaw]

I'm on it.

[Ripsaw]

Modified Style Sheet

<style type="text/css">
<!--
.wrapper {
height: 480px;
width: 640px;
margin:0px auto;
text-align:center;
padding-top:0px;
border:1px #fff;
}
.photo_image {
height: 440px;
margin: 0 0 0 0px;
background-color:#BFCCE3;
remove--->
font-family: Verdana;
font-size: 11px;
}
.photo_nav {
height: 40px;
margin:0 0 0 0px;

text-align:left;
padding:0px 0px 0px 5px;
border-top:2px solid #ccc;
background-color:#666;
font-family: Verdana;
font-size: 11px;
}
.photo_subnav {
width: 55px;
height: 40px;
background-color:#660000;
padding:0px 0px 0px 0px;
float:left;
color: #FFFFFF;
}
.spacer {
background-color:#666;
width: 10px;
height: 40px;
float:left;
}

-->
</style>

Your redone wrapper div

<div class="wrapper">
<div class="photo_image">
<img src='brewerysplash.jpg'></div>
<div class="photo_nav">
<div class="photo_subnav">< 1/12 ></div>
Crasnton, RI - Built in 1853 as the Providence Trolley house. Used as the
repair shop and storage shed for trolleys until 1923 when the city shuttered
their traction car system. It was then converted to the Cranston Brewery under
which it operated until the company went under in the late 70's.</div>
<div class="photo_nav">
<div class="photo_subnav">< 1/12 ></div>
Crasnton, RI - Built in 1853 as the Providence Trolley house. Used as the
repair shop and storage shed for trolleys until 1923 when the city shuttered
their traction car system. It was then converted to the Cranston Brewery under
which it operated until the company went under in the late 70's.</div>
<div class="photo_nav">
<div class="photo_subnav">< 1/12 ></div><div class="spacer"></div>
Crasnton, RI - Built in 1853 as the Providence Trolley house. Used as the
repair shop and storage shed for trolleys until 1923 when the city shuttered
their traction car system. It was then converted to the Cranston Brewery under
which it operated until the company went under in the late 70's.</div>



</div>

I used a spacer div to provide you with the margin you requested. Its two divs, stacked floating left. Renders in Firefox and IE6. Alter the width of .spacer for more or less margin. Let me know if this works, or not, and if you find another way, please share it. Thanks.