CODEWITHSUNDEEP
htmlcss
Niko
Niko

Reputation: 4448

How to style div float: left and right correctly

I'm just playing with some really basic html, and I'm trying to get myself caught up. The last time I really did anything structure wise tables were still ideal and dominant. So I'm using divs.

<div style="text-align:center;">Please fill out the following information
    <div>Name, email, or alias:</div>
    <div><input type="text" id="user"></div>
    <div>Master Password:</div>
    <div><input type="password" id="pwdOne"></div>
    <div>Re-enter:</div>
    <div><input type="password" id="pwdTwo"></div>
</div>

Which resulted in this:

A page that is not formatted correctly

So I did some digging and looked at some formatting example and re-did it to be this instead:

<div style="text-align:center; clear: both;">Please fill out the following information</div>
<div style="float: left;">Name, email, or alias:</div>
<div style="float: right;"><input type="text" id="user"></div>
<div style="float: left;">Master Password:</div>
<div style="float: right;"><input type="password" id="pwdOne"></div>
<div style="float: left;">Re-enter:</div>
<div style="float: right;"><input type="password" id="pwdTwo"></div>

and to my understanding this should be correct, but now I'm getting: Not any better

How do I differentiate each individual div when floating left and right so they stack correctly?

Upvotes: 1

Views: 3227

Answers (1)

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35973

try to add a class clear that clean the float like this a br or div is the same:

<div style="text-align:center; clear: both;">Please fill out the following information</div>
<div style="float: left;">Name, email, or alias:</div>
<div style="float: right;"><input type="text" id="user"></div>
<br class="clear">
<div style="float: left;">Master Password:</div>
<div style="float: right;"><input type="password" id="pwdOne"></div>
<br class="clear">
<div style="float: left;">Re-enter:</div>
<div style="float: right;"><input type="password" id="pwdTwo"></div>
<br class="clear">

.clear{
    clear:both;
}

DEMO

Upvotes: 1

Related Questions