Have block level element fill 100% width of overflow-x: scroll container

Question

I\'ve got a container element that\'s a certain width, with overflow-x: auto. In it I have a block level header element (h1) that\'s supposed to, being a block

Answer 1

The H1 is going to inherit the width of its parent element since it's relative, so it will always end up being the same width you set #one to.

What you can do is instead of #one having overflow: auto, wrap the table inside another DIV with overflow: auto. This way, #one stays a fixed width, but the wrapper around the table, allows the content to scroll horizontally.

jsfiddle: http://jsfiddle.net/yetti/Ggua5/