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;
}

​