CODEWITHSUNDEEP
htmlcssmarginpaddingstyling
Flosculus
Flosculus

Reputation: 6946

HTML Input right padding on 100% width

This is a problem I am always having.

The following HTML:

<form id="sy_login">
    <ul class="form_column">
        <li>    
            <input id="sy_login_username" name="sy_login_username" placeholder="Username"></input>
        </li>
        <li>
            <input id="sy_login_passowrd" name="sy_login_password" placeholder="Password"></input>
        </li>
    </ul>
</form>

Followed by the following CSS:

@CHARSET "ISO-8859-1";

body {
    background: #DDDDDD;
    padding:0px;
    margin:0px;
}

input[placeholder], [placeholder], *[placeholder] {
    font-style:italic;
}

.form_column {
    list-style-type: none;
    padding: 0px;
    margin: 10px 10px 10px 10px;
    width:100%;
}

.form_column input, .form_column textarea, .form_column select {
    width: 100%;
}

Yields the following result:

enter image description here

This is a firebug inspect of one of the input fields.

enter image description here

From what I can tell, ul is clipping out of the parent form due to the margin.

enter image description here

I need the ul to consist of a margin whilst having a width of 100% and for the inputs to also be 100% in width.

Updates:

I attempted replacing the margin with padding as that would have had the same intended desired effect, but it looked exactly the same. I really want to avoid a case of having to use static widths on the inputs themselves.

Another note that might prove useful for answering is that this only needs to work in HTML5, a cross standards solution would be good, but there is technically no need.

After removal of width:100%

enter image description here

It is now looking much better. However I have highlighted the problem with the input, the input needs padding for the text, yet the width of the ul must be dynamic to the parent form, with itself must have a dynamic width to the window.

Upvotes: 4

Views: 2322

Answers (5)

Rachit Mishra
Rachit Mishra

Reputation: 6112

Remove the margin from UL. Give padding to FORM. (that gives auto margins to ul).

Also do remember, When you set the width to 100% for any element then it will take the full width of its parent element, now adding some margin or padding to this element exceeds the full width of parent and may break the UI.

i.e Margin(=10px)+Width(=100%) > Width of Parent element.

Visit this link to get an idea of css box model.

http://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/

thank you.

Upvotes: 2

Wilf
Wilf

Reputation: 2315

Let's see another full version: The red border is belong to a form, a blue border belongs to a UL. Remove it if you want.

body {
    background: #DDDDDD;
    padding:0px;
    margin:0px;
}

input[placeholder], [placeholder], *[placeholder] {
    font-style:italic;
}
#sy_login{
    border:solid 1px red;
}
.form_column {   
    border:solid 1px blue;
    margin: 0px;
    padding:5px;

}
.form_column ul,li{
    list-style-type: none;
    margin:0px;
    padding:0px;
    width:auto;
}
.form_column input, .form_column textarea, .form_column select {
    width:100%;
}

Upvotes: 1

ogur
ogur

Reputation: 4586

Try something like this:

.form_column {
    list-style-type: none;
    padding: 10px;
    margin: 0;
    width:100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Upvotes: 0

Wilf
Wilf

Reputation: 2315

.form_column {
    list-style-type: none;
    padding: 0px;
    margin:10px;    
}

Upvotes: 0

Siva Charan
Siva Charan

Reputation: 18064

Try commenting width:100% on form_column

.form_column {
    list-style-type: none;
    padding: 0px;
    margin: 10px 10px 10px 10px;
    'width:100%;
}

Refer LIVE DEMO

Upvotes: 0

Related Questions