CSS - Css Having No Affect!

Hi everyone,

I'm having some trouble with my page. Basically, it has three main divs. A banner at the top, navigation along the left side and the content to the right of the navigation. The banner is in it's own wrapper (container) div, and so is the navigation and content. There is a main wrapper containing it all.

The problem is that the navigation div is floated left, and the content right. However, the main wrapper height need to change to the height of the navigation or content (whichever is largest) so it contains it all.

I've found out floating divs are placed out of sync with the main flow, so the main wrapper is totally unaffected, and the content wrapper is always 0px high.

Any help would be awesome. Thanks .

P.S. Sorry, here's code:

Code:

	<div id="main_wrapper">
		<div id="banner_wrapper">
			<img src="images/banner/banner.jpg" alt="">
		</div>
		<div id="content_wrapper">
			<div id="navigation_wrapper">
				<div id="navigation_set">
					1234
				</div>
			</div>
			<div id="article_wrapper">
				<div class="article_set">
					1234
				</div>
			</div>
		</div>
	</div>

..and the CSS:

Code:

.article_set {
	width:100%;
	height:292px;
	border: 1px solid #000;
}

#article_wrapper {
	width:562px;
	position: static;
	float:right;
}

#banner_wrapper {
	width:100%;
	height:55px;
	position:static;
}

#banner_wrapper img {
	float:right;
}

#content_wrapper {
	width:800px;
	height:auto;
	border:1px solid #333;
	position:static;
}

#main_wrapper {
	width:800px;
	background-color:#FFF;
	border: 1px solid #000;
	margin-right:auto;
	margin-left:auto;
	position:static;
}

#navigation_set {
	background-image: url(../images/navigation/background.jpg);
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
}

#navigation_wrapper {
	width:200px;
	height:auto;
	float:left;
	position:static;
}

#page_layout {
	background-color: #CCC;
	margin: 0px;
	padding: 0px;
}

Thanks again

i have images, but i have this
Code:

* a {
	text-decoration:none;
	font-weight:bold;
	color:#665637;
}

* a:hover {
	color:#B39760;
	border-top-style: double;
	border-top-width:  1px;
	border-top-color: #665637;
}

and my anchored images take on the hover property. how can i stop them from doing this and just stay as they were?