Have block level element fill 100% width of overflow-x: scroll container
css, html
Solution
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/
Problem
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 element, fill the container horizontally. And it does so, as long as there are no other elements in the container that overflow, creating a horizontal scrollbar. If there are overflowing elements, then the header element fills only the non-overflowing horizontal space of the container, but doesn't appear in the overflowing space. Fiddle demonstrating the problem: http://jsfiddle.net/rand0mbits/qUh3s/ HTML: ``` <div id="one"> <h1>header</h1> <table><tr><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td> <td>text</td></tr></table> </div> ``` CSS: ``` #one { width: 200px; overflow: auto; border: solid 1px; } #one h1 { font-size 1.1em; background-color: blue; display: inline-block; width: 100%; margin-top: 0; } table td { border: solid 1px; padding: 20px; } ``` How do i make the `<h1>` fill the whole width of the container?