IE %width using full page, not available size

[jstam]

I have a table to place in a <div>. I would like it to take up 50% of the available space in the <div>. This works fine in Firefox, but IE seems to use the width of the entire page, not just the <div>. As a result, the table spills over the edge of the browser. Is there a way around this?

Thanks

#contents{
margin-left:200px;
padding:0px;
width:auto;
}

table.announcements
{
width: 50%;
}

[createErrorMsg]

This is a doctype issue. With a doctype, and therefor functioning in Standard Mode, IE displays this scenario correctly. Without a valid doctype, IE does not follow the standard box model and box width calculations.

The standard box calculation "method" when a browser is faced with width:auto, is to first take all borders, padding and margin, then use all the leftover available space as the width. You can see FF do this, as the 50% width of the table is calculated as half of the viewport width MINUS the 200px left margin (800px viewport - 200px margin = 600px div width / 50% = 300px). As mentioned, with a valid doctype, IE does the same calculation. Without a doctype, however, IE doesn't take out the margin before calculating the 50% table width. Instead, it bases the 50% on the div width without the margin removed, resulting in a 400px wide table instead.

Solution: add a full and valid doctype [w3.org] to your page.

cEM