Forum Moderators: open
It may not be the best way, but this should do it for you :
<script type="text/javascript">
function div()
{
w=document.getElementById('a').offsetWidth;
document.getElementById('table').style.width=w+"px";
}
</script>
<body onload="div()" onresize="div()">Come to think of it though, I think the easiest way would be to set the width of your table in px - the same as your div. Can you do that? You might also need table-layout:fixed in your css (but I'm not sure to be honest).
I hope this helps.
...outer div here...
<div style="width:100%;"><table>...</table></div>
.../outer div
Does anyone know how to get a table to stretch to 100% when it is in a div that has been absolutely positioned in the center of the page?
Instead of thinking percentages, think absolute widths. You say the div is absolutely positioned in the center of the page. I'm assuming that div has a fixed width. If so, make your table a fixed width and be sure to take into consideration any padding and/or margins on your div.
If the content of the table's cells is sufficient to push it out to 100% it will go that far, but if it isn't it won't. If I set the table's width to 100% the latest IE 6 makes it way too wide and it stretches far across the right navigation column.
I did try 100%ing the table with the same results, but I found something interesting. With the doctype at the top of the page, I get the weird behavior, but without it I do not. Here is the code that shows the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.content {width:100%}
div.container {position:absolute;left:150px;right:150px;top:150px}
table.test {background-color:black}
</style>
</head>
<body>
<div class="container">
<div class="content">
<table class="test" width="100%">
<tr>
<td> </td>
</tr>
</table>
</div>
</div>
</body>
</html>
If you take away the doctype, the problem disappears. Also, how can this be a feature if IE6 is the only one that does it this way out of IE6, Netscape 7, Firefox, Opera, and Mozilla 1.4.
What threw me off at first was your assumption that it was the table stretching the <div> wider than it should be. That's a known issue with IE5, which I deal with all the time. When I started playing with the code you posted above, I found that the table actually has nothing to do with the problem. The div itself isn't behaving.
The strange thing is, it works in FireFox, which I trust to get things right (even though I didn't know you could position from the left and the right at the same time). So the fact that removing the doctype causes IE to get it "right" is very strange to me. The doctype, after all, is what is supposed to send IE into standards-compiance mode (which is where FireFox spends most of its time).
Anyway, take your code posted above and eliminate the table. Then, assign background colors to your two div's. You'll see that the div still stretches those 150px too far to the right. So the table really isn't the issue here.
After playing with your code for about half an hour, I think the short answer is that exactly what you want to do can't be done, at least not so it works in IE. However, I believe you can probably get the same effect, by removing the positioning rules from your container div and using margin and/or padding instead. Your container div can still come first in your code, if that's what you're after, and you can get the space allotted to your side columns like you need. Position your header absolutely and bingo, you'll have the result you want.
The problem seems to be that IE is setting the width of the container div to be 100%, but setting it 150px to the left besides. It's ignoring the distance it's supposed to stay from the right. So the result is the horizontal scrollbar.
Typical IE lameness at its best! ;)
I've tried all kinds of things; margins, negative margins, positioning, etc. I just don't think you can get fixed-width margins/positioning on both sides of an absolutely-positioned, 100%-wide element. Unfortunate . . . unless SuzyUK or DrDoc have some of their magic to share? ;)
