CODEWITHSUNDEEP
htmlcss
XT_Nova
XT_Nova

Reputation: 1170

Why won't my two column form line up correctly?

I'm learning some css and want to make a two column form, without any table tags and such. This is what i have got (code from CSS Cookbook 3ed edition).

JSfiddle HERE...

HTML code:

<div class="container">
        <form id="regform" name="regform" method="post" action="/regform.php">
            <div id="register">
                <h4>Register</h4>
                <label for="fmlogin">Login</label>
                <input type="text" name="fmlogin" id="fmlogin" /> 
                <label for="fmemail">Email Address</label>
                <input type="text" name="fmemail" id="fmemail" /> 
                <label for="fmemail2">Confirm Address</label>
                <input type="text" name="fmemail2" id="fmemail2" /> 
                <label for="fmpswd">Password</label>
                <input type="password" name="fmpswd" id="fmpswd" /> 
                <label for="fmpswd2">Confirm Password</label>
                <input type="password" name="fmpswd2" id="fmpswd2" />
            </div>
            <div id="contactinfo">
                <h4>Contact Information</h4>
                <label for="fmfname">First Name</label>
                <input type="text" name="fmfname" id="fmfname" />
                <label for="fmlname">Last Name</label>
                <input type="text" name="fmlname" id="fmlname" />
                <label for="fmaddy1">Address 1</label>
                <input type="text" name="fmaddy1" id="fmaddy1" />
                <label for="fmaddy2">Address 2</label>
                <input type="text" name="fmaddy2" id="fmaddy2" />
                <label for="fmcity">City</label>
                <input type="text" name="fmcity" id="fmcity" />
                <label for="fmstate">State or Province</label>
                <input type="text" name="fmstate" id="fmstate" />
                <label for="fmzip">Zip</label>
                <input type="text" name="fmzip" id="fmzip" size="5" />
                <label for="fmcountry">Country</label>
                <input type="text" name="fmcountry" id="fmcountry" />
                <input type="submit" name="submit" value="send" class="submit" />
            </div>
        </form>
    </div>

CSS code:

label {
    margin-top: .33em;
    display: block;
}

input {
    display: block;
    width: 250px; 
}

#register {
    float: left; 
}

#contactinfo {
    padding-left: 275px; 
}

Upvotes: 0

Views: 379

Answers (4)

iamkarsoft
iamkarsoft

Reputation: 21

You have to float all the div in your containter 

#register {
float: left;

}

#contactinfo {
float:left;
margin-left:30px;  /*increase or decrease if you like*/
}

Upvotes: 0

ralph.m
ralph.m

Reputation: 14345

Another option is to remove the margins from the h4 (although, as said in other answers, floating [or similar] both columns makes more sense).

h4 {margin: 0;}

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22161

Here's how I'd debug (except I'd use Firebug or another Inspect/devtools): http://jsfiddle.net/PhilippeVay/yuxTA/2/

As stated by @Arjan in his answer, this is due to floating and its effects.
Uncomment the last CSS declaration for a solution that won't modify layout. Also add margin-top to both columns or padding-top if you want a vertical margin back...

Upvotes: 0

Arjan
Arjan

Reputation: 9874

Because you float one div and not the other.

With a few simple CSS changes it'll work (as long as the h4 does not span multiple lines):

#register {
    float: left;
    width: 275px;
}

#contactinfo {
    float: left;
}

See the updated fiddle.

Upvotes: 2

Related Questions