CODEWITHSUNDEEP
htmlcssformsborder
BackSlash
BackSlash

Reputation: 22233

Can't display form border properly

i'm not very familiar with CSS, i'm trying to apply a border on my login form, here is the code i use:

login.html:

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<div id="login_container">
    <form action="#" method="POST">
        <div class="row">
            <label for="username" class="label">Username</label>
            <input type="text" class="field" name="username" />
        </div>
        <div class="row">
            <label for="password" class="label">Password</label>
            <input type="password" class="field" name="password" />
        </div>
    </form>
</div>

css/style.css:

#login_container {
    margin-top:50px;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    border:1px solid black;
    display:block;
}

.field {
    float:right;
    margin-left: 10px;
}

label {
    float:left;

}

.row{
    display:block;
    clear:both;
}

and the output:

The output of the previous code

Why does the border cross the password text field?

EDIT:

with form{ border:1px solid black; }

the output is:

Output with form border instead og #login_container border

Upvotes: 0

Views: 1833

Answers (1)

j08691
j08691

Reputation: 207901

Add overflow:auto; to your #login_container div.

jsFiddle example

Because the inner elements are floated, you need to specify the overflow property to bring the border back around them.

Upvotes: 2

Related Questions