Float/clear issue

[javashackgirl]

Here's the trouble, I've got a floating left navbar, but I have a floating element in the 'content' div of my page (to the right of the navbar). I have certain elements that I need to make "clear" the floating element, but when I "clear" them, obviously it clears the navbar float:left, also.

How do I avoid this?

I have an example of what I'm doing, but what I'm doing is much more complex than this.

#mainnav {float:left; height: 400px;}
img {float:left}
p {clear:both}
#footer{clear:both}
<div id="mainnav"> <p>vbnvbnvnb</p> <p>vnbvbnvbnvbn</p> <p>vbnvbnvbnvbn</p> <p>vbnvbnvbnvbn</p> </div>
<img src="img/imageplaceholder.gif" width="172" height="138" />
<h1>dgdfgggddf</h1> //*This will float beside the img*//
<p>dgdfgggddf</p> <p>dgdfgggddf</p> <p>dgdfgggddf</p> //*This will clear the img and begin new blocks just underneath it*//
<div id="footer"> <p>yyuiyuiyui</p> <p>yuiyuiyuiyui</p> <p>yuiyuiyuiyui</p> <p>yuiyuiyuiyui</p> </div>

TIA
Javashackgirl

[createErrorMsg]

Float clearing is supposed to be contained to the box the element is in, so enclosing that whole img, h1, p block in a container div should prevent the enclosed clear from clearing the seperate navbar.

Here it is in w3-speak:

The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

So if the clear element and the floated element are in different block formatting contexts, the float will not affect the clear.

As for what a block formatting context IS, the w3 says...

Floats, absolutely positioned elements, inline-blocks, table-cells, and elements with 'overflow' other than 'visible' establish new block formatting contexts.

So there you go. Put the element with a clear property into it's own block formatting context (a div should do it; you may need to float it, or give it display:inline-block (which doesnt' validate, but oh-well), or change it's overflow value) and it will only clear floats within it's own context.