Trouble floating elements - html

Question

I have two divs contained within a larger div and I'd like them to be laid next to each other. My approach was to float the first div left and set Overflow: hidden on the containing div.
For some reason it's not working and the 2nd div ends up ontop of the first.
Herse is the demo, http://jsfiddle.net/9xmDP/. I have some color coding which I was using to try and debug the overlapping. The code is also below. The signup form should be next to the login form instead of on-top of it.
HTML
<div id="container">
<div id="signupDiv">
<div id="signupLabel">
SignUp
</div>
<form id="signupForm">
User <input type="text" name="user"><BR/>
</form>
</div>
<div id="loginDiv">
<div id="loginLabel">
Login
</div>
<form id="loginForm">
User <input type="text" name="user"><BR/>
</form>
</div>
​
CSS
#container{
overflow: hidden;
}
#signupLabel{
border: solid black 1px;
width: 300px;
}
#signupDiv{
float:left;
}
#loginLabel{
border: solid red 1px;
width: 300px;
}
#loginDiv{
width: 300px;
border: solid pink 1px;
}

Answer 1

Try this css. fiddle here
#container{
width:604px;
}
#signupLabel{
border: solid black 1px;
width: 300px;
}
#signupDiv{
float:left;
width:300px;
}
#loginLabel{
border: solid red 1px;
width: 300px;
}
#loginDiv{
width: 300px;
float:left;
border: solid pink 1px;
}
​

Answer 2

You need to float:left #loginDiv as well. See your updated fiddle here:
http://jsfiddle.net/9xmDP/2/

Answer 3

When you float an element, it is removed from the normal content flow, and any content in its parent element and other children of the parent tries to wrap around it.
So the signupDiv is indeed floated to the left, which puts it on top of the non-floating loginDiv. The content in the loginDiv does try to wrap around the signupDiv, but since you've specified both elements to be 300px wide, there's no room for it, and so it must go below the floating div instead.
The simplest solution is to float both divs, like this:
#signupDiv, #loginDiv {
float: left;
}

Answer 4

You can place the divs next to each other, by making them both float.
If you make the container 605px, then the divs will fit in there (including the border)
#container{
width: 605px;
overflow: hidden;
}
And this
#loginDiv{
float: left;
width: 300px;
border: solid pink 1px;
}

Answer 5

Diplay:inline will also do the trick here..
http://jsfiddle.net/9xmDP/4/
#loginDiv{
width: 300px;
border: solid pink 1px;
display:inline-block;
}