CSS automatically expands the width of the header and footer to fit the width of the div content when the content goes beyond the extended (off-screen)

Question

I am trying to create a website layout with a header, content and footer. Both the header and footer should expand to 100%. And they do it. But when I put a very wide element inside the div content, the header and footer remain the width of my screen and do not expand further to fit the width of the content. Please help achieve this behavior.

In my example below, I would like the blue header and yellow footer to expand and fit the width of the gray content (which in real life will contain a table with an unknown width)

jsfiddle: http://jsfiddle.net/StormBlast/z4hegp1o/3/

HTML:

<div id="wrapper"> <div id="header">Header</div> <div id="content"> <div style="width: 2500px; background-color: gray;"> here comes very wide table with some results and expands beyond screen borders (in width) here comes very wide table with some results and expands beyond screen borders (in width) here comes very wide table with some results and expands beyond screen borders (in width) here comes very wide table with some results and expands beyond screen borders (in width) here comes very wide table with some results and expands beyond screen borders (in width) </div> </div> <div id="footer">Footer</div> </div> 

CSS

 html, body { margin:0; padding:0; height:100%; } #wrapper { min-height:100%; position:relative; } #header { padding:10px; background:#5ee; } #content { padding:10px; padding-bottom:80px; /* Height of the footer element */ } #footer { width:100%; height:80px; position:absolute; bottom:0; left:0; background:#ee5; } 

Answer 1

You might want to try using jQuery for this size match.

With jQuery, you just grab the width of the contents of the div and change the width of the header and footer only when the page loads.

  $('#header,#footer').width($('#content div').width()); 

http://jsfiddle.net/z4hegp1o/4/