float issue

For my footer, these floats just don't want to align up properly. I want the elements in the divs to align horizontally at the top. Any help is greatly appreciated.


<div id="footer">
<div id="help">
<h1> <a>Help</a> </h1>
</div>
<div id="logo2">
<ul><li></li></ul>
</div>
<div id="copyright">
&copy;2009
</div>

#footer{
clear:both;
padding-left: 29px;
padding-right: 20px;
background: url(/images/bg-bottom.png) no-repeat left bottom;
padding-top: 35px;
padding-bottom: 10px;
color: #666;
font-size: 0.875em;
}

#help {
width: 380px;
display:inline;
float:left;
margin-left:10px;
margin-right:10px;
margin-top: -2em;
font-size: .8em;
}


#logo2 { width: 380px;
display:inline;
float:left;
margin-right:10px;
margin-top: -2em;
float: left;
margin-left: 5em;
}

#logo2 ul {margin: 0; padding: 0;}

#logo2 li {
background: url(/images/logo64.png) no-repeat left top;
width: 200px;
height: 30px;
}

#copyright {
float: right;
text-align: right;
margin-top: -2em;
}

I found a temporary solution of creating a container div with a -2 margin. But this doesn't seem like a sufficient method at all with these negative margins. The problem though is that my layout requires the footer to have a lot of top padding because it's an image that needs to display to its fullest.

How about changing the order of the divs.
<div id="footer">
<div id="copyright">
&copy;2009
</div>
<div id="help">
<h1> <a>Help</a> </h1>
</div>
<div id="logo2">
<ul><li></li></ul>
</div>
</div>

Putting a link/complete code in your post helps people trying to debug your issue.

Good morning johnmerlino,
The first thing I notice is that you are not clearing your floats.
Add overflow:auto; to your #footer CSS and it's going to act a lot differently.

Have a look at this site about clearing floats. (http://www.quirksmode.org/css/clearing.html)

And you're right about the negative margins. They have their place but they don't seem necessary here.

Yes, overflow: auto was the solution. Thanks

And this helped solve the alignment:

#help h1 {
font-size: 1.5em;
line-height: 1em;
}