CSS: Placing divs left/center/right inside header
===

I've been trying to create a site with the following structure: http://i50.tinypic.com/vhw076.png

But I can't seem to get the header correct (e1 left, e2 centered, e3 right). I want the three elements e1, e2 and e3 to be left, middle and right positioned. This is what I'm trying:  

    <div id="wrapper">
	<div id="header">
		<div id="header-e1">
			1
		</div>
		<div id="header-e2">
			2
		</div>
		<div id="header-e3">
			3
		</div>
	</div>
	<div id="nav">
		links
	</div>
	<div id="content">
		content
	</div>
	<div id="footer">
		footer
	</div>
    </div>

With this css:  

<pre>

    #wrapper
    {
    	width: 95%;
    	margin: 20px auto;
    	border: 1px solid black;
    }
    
    #header
    {
    	margin: 5px;
    }
    #header-e1
    {
    	float: left;
    	border: 1px solid black;
    }
    #header-e2
    {
    	float: left;
    	border: 1px solid black;
    }
    #header-e3
    {
    	
    	border: 1px solid black;
    }
    
    #nav
    {
    	margin: 5px;
    }
    #content
    {
    	margin: 5px;
    }
    #footer
    {
    	margin: 5px;
    }

</pre>

Can someone give me tips to what I can do? The structure is going to be used on a mobile website.