Trouble floating elements

Mitja Bonca

New Member
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\[code\]<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>\[/code\]?CSS\[code\] #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;}\[/code\]
 
Back
Top