div and table problem

[haripadadas]

I have a style sheet containing the following definitions:

#leftcontent {
position: absolute;
left:20px;
top:60px;
width:180px;
border:1px solid #000;
padding-top: 15px;
}
 
#centrecontent {
margin-left: 200px;
margin-right: 200px;
border:1px solid #000;
padding-top: 15px;
}
 
#rightcontent {
position: absolute;
right:20px;
top:60px;
width:180px;
border:1px solid #000;
}

and inside <div id="centreconte nt"> I have <table width=100%>, which I hoped
would produce a table the width of just the centre section. However, in
Internet Explorer the table is the full width of the page, which then goes
off the side of the window since it is already indented about 200 px. In
any other browser I have tried the table width is correct. Can someone
please tell me what is wrong? Thanks.

[drhowarddrfine]

Setting something to 100% means 100% of the containing parent element. If the body is the containing element, and it is the full width of the page, then so is the table.

[thesmithman]

@haripadadas
a suggestion: you could edit your CSS to something like:

#centrecontent table{
margin-right:200px;
margin-left:200px;
width:100%;
}
 

and that would allow you to remove the width declaration from your HTML.

Sometimes IE has a buggy display; but other times IE is just very literal in its interpretation of instructions. Some of the other browsers are more gentle in their renderings.

Best of luck!