Input extending past boundaries? [closed]

Question

I'm creating a basic website for practice and I am having some troubles with my inputs. They seem to be extending past their boundaries even though I have the parent DIV defined as 899PX (I'm setting the inputs width to 100%).

View

(the input extends beyond the DIV above it)

My resources are as follows:

style.css, reset.css

Any suggestions?

Answer 1

It's because the input field is padded; you need to add:

#content input
{
 padding: 0px;
}

You'll now see that the box is 2px too wide (901px) for the div (899px). This usually means that there is an extra 1px hiding somewhere on two or more sides. It happens to be your border (because when we add border: 0px to #content input it returns to 899px wide). Experiment with widths and broder-sizes until it works for you.

I develop with the Chrome inspector, an invaluable tool for debugging CSS (among many other things) — it highlights and colour-codes many useful CSS properties like margins and paddings. It will also show you struck-out CSS properties for elements which have been overridden by cascaded styles (which I suspect was the trap here).

Also, assuming Uno, Dos, etc are column headers, you'll want to structure your table like this:

    <table id="statistics">
        <thead>
            <tr>
                <th scope="col">Uno</th>
                <th scope="col">Dos</th>
                <th scope="col">Tres</th>
                <th scope="col">Cuarto</th>
                <th scope="col">Cinco</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>#</td>
                <td>#</td>
                <td>#</td>
                <td>#</td>
                <td class="final">#</td>
            </tr>
        </tbody>
    </table>

This is both more standards-compliant, and will allow you to more easily style your column headers (i.e., table thead tr th { special-style }) without applying special classes.

Answer 2

When you set width: 100% on the input element, you are by definition setting the width of its content. The total width of the rendering of an element is its content width plus horizontal paddings plus vertical borders; here you have 3px left padding and 1px borders.

I’m afraid there’s no really cross-browser way to fix this. For advanced browsers, you can use box-sizing: border-box, see Box model tweaking. For IE, you could use tricks that put it to Quirks Mode, but that could have nasty effects.

Consider whether the input box needs to be of the same width as its container. Normally, the visible width of an input box should reflect the amount of expected input rather than its context.