Menu
I have a table of results inside an area div. Because I am using a fluid layout, the area div doesn't have a set width. The width of the table is set to 100%, but in IE7 it overflows beyond the containing div. Any ideas?
HTML:
<div id="area">
<table id="results">
</table>
</div>
CSS:
#results{
width: 100%;
}
706
auto automatically computes the width such that the total width of the div fits the parent, but setting 100% will force the content alone to 100%, meaning the padding etc. will stick out of the div, making it larger than the parent. so setting the 'width' to 'auto' would be better? Yes, but that's the default anyway.
width: 100%; will make the element as wide as the parent container. Extra spacing will be added to the element's size without regards to the parent.
Overflow happens when there is too much content to fit in a box. CSS provides various tools to manage overflow. As you go further with CSS layout and writing CSS, you will encounter more overflow situations.
What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.
Got it! I needed to set white-space:normal for all the TDs and THs within the table.
132
You will need to give zoom: 1 to the parent <div> of table #area { zoom: 1 }
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
