CSS: Styling CSS box

You might use the following CSS rule to specify the dimensions of a container:-

#searchbox
{
width: 200px;
height: 30px;
border: 5px;
padding: 10px
}

This CSS rule would be applied to:

<div id="searchbox">...</div>

It means that the total width of the box is 230px (200px width + two 5px borders + two 10px paddings) in all browsers except in IE. In IE, the total width would be just 200px (plus the padding and border widths).

Alternatively, you may use this CSS:

#searchbox
{
width: 200px
height: 30px;
}

#searchbox div
{
border: 5px;
padding: 10px
}

And the new HTML would be:

<div id="box"><div>...</div></div>

With this simple hack, the search box width will always be 200px, regardless of the browser.