Layout Problem

[KDehart]

I'm in the middle of designing a page for a friend and am having problems with getting the layout right. The navigation is going to be on the left side with a black background, and will be 194px wide (size of the navigation image which will be on the top left), and needs to have a height of 100% in order to stretch to the length of the browser window and beyond (dependent on the amount of text in on the right). The right side is going to be for content (blog entries and a basic gallery) with a white background that is 10px to the left of the navigation, and 150px from the right side of the browser window. I have almost everything working just fine, except for the bottom of the left side, and the top of the right side.

 

The left side stretches to the browser window as intended, but it doesn't go any further to match the overflow of the content. Then the right side in firefox is about 15-20px spaced from the top, regardless of the css. Here is how the code is laid out:

 

HTML (just the layout code, no need to post the header):

<div class="side">
<img src="side.jpg" border="0" usemap="Links">
	<map name="Links">
		<area shape="rect" coords="24,243,171,272" href="link1.html">
		<area shape="rect" coords="24,273,171,302" href="link2.html">
		<area shape="rect" coords="24,303,171,332" href="link3.html">
		<area shape="rect" coords="24,333,171,362" href="link4.html">
	</map>
</div>
<div class="content">This is where the content is</div>

 

CSS:

.side
{
width: 194px;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
background-color: #000000;
}
.content
{
left: 204px;
top: 0px;
position: absolute;
padding-right: 150px;
}

 

Does anyone have any ideas?

[KDehart]

Forgot that absolute ignores the flow. I changed it to fixed, and even though that stays onscreen while scroll won't be completely visable if the browser window is smaller than the image, I doubt a browser window will be under 370px, lol. It actually looks better than way anyway. The only thing is the text being space about 15-20px from the top in firefox.

[KDehart]

I would edit, but I no longer can. It's really annoying when you search around for solutions to something you just can't figure out, and then later on, one glance is all it takes to figure it out. All of the paragraphs were just that; paragraphs. So they all had the <p> tag...even the first paragraph, bah!.