I have a 15-column table inside a div (inside other divs). When I increase the font size in the browser, the table gets bigger but the box enclosing it doesn't, so the table eventually breaks out of the box.
I don't seem to be able to set the width of the box to auto or it spans the entire page.
.container {
position: relative;
margin: 0 auto;
width: 800px; (can't be auto or it snaps to edges of page)
height: auto;
}
.content_outer_table { background: #000000;; position: relative; padding: 20px; }
.content_inner_table { background: #ffffff; border: 1px solid #333333; padding: 20px; }
The page is simplicity itself:
<div class="container">
<div class="content_outer_table">
<div class="content_inner_table"><!--table goes here--></div>
</div>
</div>
Can I have the divs "suck in" to the size of the content, or expand (horizontally) as the content grows?
- BobThe only way to do that is to float the DIV or position it absolutely.
I don't seem to be able to set the width of the box to auto or it spans the entire page.
.container {
position: relative;
margin: 0 auto;
width: 800px; (can't be auto or it snaps to edges of page)
height: auto;
}
.content_outer_table { background: #000000;; position: relative; padding: 20px; }
.content_inner_table { background: #ffffff; border: 1px solid #333333; padding: 20px; }
The page is simplicity itself:
<div class="container">
<div class="content_outer_table">
<div class="content_inner_table"><!--table goes here--></div>
</div>
</div>
Can I have the divs "suck in" to the size of the content, or expand (horizontally) as the content grows?
- BobThe only way to do that is to float the DIV or position it absolutely.