Question

I’ve got a bit of a css issue. I’m have a container div with a set size and an absolute position. Inside that I have an element of some kind and a div. the element can be a button or a input in my example. The button follows the rules and is 100% of the container, the input doen’t follow the rules and is more than 100% of the container. Whats going on and how do I go about fixing it? jsfiddle – Click either widget to see its bounds.

CSS

.Object
{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
    height: 100px;
}

.Object .Cover, .Object button, .Object input
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index:0;
}

.Object button
{
    padding: 2px;
}

.Object .Cover
{
    cursor: move;
    z-index:1;
}

HTML

<div class="Object" id="3b089a23-7732-e743-aea4-d9dcef359d4e" name="Unnamed Widget" style="height: 30px; "><div class="Cover"></div><input /></div>

<div class="Object" id="e1bc0640-e049-eda8-05ac-0a99c21c6fe1" name="Unnamed Widget" style="height: 30px; top: 10px; left: 210px; "><div class="Cover"></div><button data-click="">Unnamed Button</button></div>

Answer 1

The 104 px is caused by the box-model. When set to default it will take into account the borders and padding of the element, seeing as an input has default padding and borders (ipx in this case), it added up to 4 and made it “grow” out of its parent.

If you add box-sizing: border-box; to your input selector (I moved it to a standalone selector) and set your own border styles, it works as you desire 🙂

.Object input
{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    /*border: 0;
    padding: 0;*/
    border: 1px solid #ccc;
    background-color: #eee;
}

http://jsfiddle.net/K5D9z/13/

Hope it helps.

Note: afaik IE6, 7 won’t work as expected, but you can just use a conditional comment and set its width/height differently.