On 2008-06-06, j055 <andrew.jocelyn@orbnet.co.ukwrote:
Quote:
Hi
>
The following HTML shows a table with some wide content which overlaps
an outer div when the browser width is narrowed? How do I allow the
table content to push the div to the width of the table?
>
I want the div to normally be centered and 90% of the page width. The
table content is dynamic so I never know how wide it's going to be. I
just want to handle things more gracefully than overlaping it.
|
Add display: table to the styles for .box.
Not expected to work in IE, where you will just have to use a <table>.
Or just put the red border on the table you already have and forget the
div, although in the real page, the div perhaps has some purpose.
There are other ways, but not if you want .box centered and with a
minimum width of 90%. If you didn't mind it on the left, you could use
float: left and min-width: 90% instead of display: table.
Quote:
Many thanks
Andrew
>
><html xmlns="http://www.w3.org/1999/xhtml">
><head>
<title>Box problem</title>
<style type="text/css">
.box
{
margin: 0 auto;
width: 90%;
border: solid 2px red;
}
</style>
></head>
><body>
<div class="box">
<table cellspacing="0">
<tr>
<td>
>
verywidestuffverywidestuffverywidestuffverywidestu ffverywidestuffverywidestuffverywidestuffverywides tuffverywidestuffverywidestuff
</td>
</tr>
</table>
</div>
></body>
></html>
|
