CODEWITHSUNDEEP
htmlcss
user6619012
user6619012

Reputation:

Display space betweeen 2 textfields

if you see below image or visit link1 , below text "ALREADY REGISTERED" we can see 2 textboxes with good amount space between them.

enter image description here

but if visit link2 than there is no space between them, please help me to display space between those textfields.

enter image description here

.input-box {
    float: left;
    width: 100%;
    padding-top: 2px;
}

Upvotes: 0

Views: 85

Answers (6)

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Remove this class on li inner div .input-box

your html like blow

<ul class="form-list">
                        <li>
                            <div class="">
                                <input type="email" placeholder="Enter Your email" title="Email Address" class="input-text required-entry validate-email" id="email" value="" name="login[username]" spellcheck="false" autocorrect="off" autocapitalize="off">
                            </div>
                        </li>
                        <li>
                            <div class="">
                                <input type="password" placeholder="Enter Your Password" title="Password" id="pass" class="input-text required-entry validate-password" name="login[password]">
                            </div>
                        </li>
                                                <li>
                            <a class="f-left" href="http://sbdev1.kidsdial.com/customer/account/forgotpassword/">Forgot Your Password?</a>
                        </li>
                        <li class="control remember-me-box">
        <div class="input-box">
        <input type="checkbox" title="Remember Me" checked="checked" id="remember_meG1nd66Tg4Y" class="checkbox" name="persistent_remember_me">
    </div>
    <label for="remember_meG1nd66Tg4Y">Remember Me</label>
    <a href="#" class="link-tip">What's this?</a>
</li>
                    </ul>

Upvotes: 0

Jerad Rutnam
Jerad Rutnam

Reputation: 1546

Update your css like this,

.input-box {
    float: none;
    /* padding-bottom: 20px; */
    width: 100%;
}

Also this if want fix the position of * Required text

.fieldset p.required {
    margin-bottom: 7px;
    float: right;
    font-size: 12px;
    margin-top: 0px;
    padding-right: 0;
}

Upvotes: 0

Minal Chauhan
Minal Chauhan

Reputation: 6148

Remove float:left from .input-box and it's work fine.

.input-box{
    width: 100%;
    padding-top: 2px;
}

Upvotes: 0

Krešimir Galić
Krešimir Galić

Reputation: 376

Here is the code: 

.input-box {
   padding-bottom: 20px; 
   display: table; 
   width: 100%;
}

Upvotes: 0

Laravel14
Laravel14

Reputation: 48

both links are the same. but anyway. you do something like this.

.input-box {
    float: left;
    margin-bottom: 10px;
}

Upvotes: 1

Rohan Mulay
Rohan Mulay

Reputation: 349

use
tag between two input text boxes

<input type="text" name="email">
<br>
<input type="text" name="password">

Upvotes: 2

Related Questions