Question

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:

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

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

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%

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.

Answer 1

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.