Question

Trying to format a field using HTML.
I have the following:

<table style="width: 100%;" cellpadding="0px" cellspacing="0px">
    <tr>
        <td style="width: 65px;">
            <asp:Label ID="lblKeywords" runat="server" Text="Keywords"
                 AssociatedControlID="txtKeywords" Font-Bold="true"></asp:Label>
        </td>
        <td>
            <asp:TextBox ID="txtKeywords" Width="100%" runat="server"
                 MaxLength="256" placeholder="Use comma to seperate keywords." />
        </td>
    </tr>
</table>

Checking the result, the textbox txtKeywords is 4 pixels longer than its cell.

I assume those are the 4 pixels of the border; what is the best way to deal with this?

Answer 1

You can use the following CSS rule to change box-sizing to “border-box”:

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

IMHO this results in behavior that is far easier to grok. For example, a width of “100%” then means 100% including border, margin and padding. You can read more about it here: http://paulirish.com/2012/box-sizing-border-box-ftw/

Also, as a side note, consider not using tables to align your form fields. Have a look at my blog post about it: http://davidtanzer.net/css_vertical_align