CODEWITHSUNDEEP
htmlcsshtml-table
Nicero
Nicero

Reputation: 4377

Setting TEXTAREA and INPUT fields to 100% width inside TD truncates right margin

Please help me fix this issue. I would like to set the width of INPUT and TEXTAREA elements to 100% so that they entirely fit the table cell but I noticed that the right border is truncated.

I tried to wrap the INPUT inside a DIV and set 'overflow' to 'hidden' as I read on other answers but it does not work:

<div style="overflow:hidden">
    <input class="input_field" type="text" />
</div>

I also set margins and paddings, and width=95% too but the right border is always truncated even if it is well inside the TD.

Please see the HTML and CSS code at jsFiddle. Look carefully to the right border of the elements, you will see they are truncated. Set 'table border=0' to see better.

Upvotes: 2

Views: 2103

Answers (2)

My Head Hurts
My Head Hurts

Reputation: 37665

The CSS specification states that the width of an element does not include the border; which could be argued as wrong and complicates the width in scenarios like yours.

Funnily enough, Internet Explorer went against this CSS specification and used what was known as the box model (width including the border) - which caused a headache at the time, but can now be applied to other browsers using the following CSS:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

To support my answer (as the upvote was removed), you can read the following article:

Revenge of the IE Box Model by Jeff Kaufman

Upvotes: 1

Ben Lee
Ben Lee

Reputation: 53319

Use box-sizing: border-box (and the corresponding browser-specific versions):

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

See http://jsfiddle.net/trwut/4/

Related reading: http://paulirish.com/2012/box-sizing-border-box-ftw/

Upvotes: 3

Related Questions