Can 100% Width Text Boxes Be Contained Within Their Containers?

Controlling Text Box Width within Containers

In web development, it's often desirable to have text boxes fill the width of their containers. However, margin, border, and padding added by the browser can cause 100% width text boxes to extend beyond the container's bounds.

Can 100% Width Text Boxes Be Contained?

Yes, by utilizing the CSS3 property box-sizing: border-box, you can redefine "width" to account for external padding and border.

CSS Implementation

input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

This solution works by including the extra space occupied by padding and border in the calculation of the text box's width.

Fallback for Non-CSS3 Browsers

For older browsers, an alternative is to add a specific amount of right padding to the enclosing container:

#container {
    padding-right: 6px;
}

The padding amount is typically 6px for IE versions prior to 8.

The above is the detailed content of Can 100% Width Text Boxes Be Contained Within Their Containers?. For more information, please follow other related articles on the PHP Chinese website!