CODEWITHSUNDEEP
htmlcsscss-float
Usman Mutawakil
Usman Mutawakil

Reputation: 5259

Trouble floating elements

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

Upvotes: 1

Views: 57

Answers (5)

syed mohsin
syed mohsin

Reputation: 2938

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

​

Upvotes: 1

Scorpio
Scorpio

Reputation: 1171

Diplay:inline will also do the trick here.. http://jsfiddle.net/9xmDP/4/

#loginDiv{
width: 300px;
border: solid pink 1px;
display:inline-block;
}

Upvotes: 1

Nerbiz
Nerbiz

Reputation: 134

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

Upvotes: 1

Ilmari Karonen
Ilmari Karonen

Reputation: 50328

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

Upvotes: 1

Mike Brant
Mike Brant

Reputation: 71384

You need to float:left #loginDiv as well. See your updated fiddle here:

http://jsfiddle.net/9xmDP/2/

Upvotes: 1

Related Questions