Increasing width of element to page width on fixed-width page

Question

I have a site that is a fixed width, within the content area I am displaying a log viewer.

The log viewer is hard to read as it is confined by the fixed width of the site and the log lines are quite long.

What I want to do is above the log viewer have a button that says "Expand", when clicked the log viewer's width would grow to be just slightly less than the size of the viewport.

The rest of the site would still remaine fixed width but the log viewer would be as wide as the screen.

I've drawn an image of what I want to achieve here:

http://imgup.co.nz/3940

I have tried setting "position: absolute; left: 20px" (As well as setting the width) but this causes the footer of my site to move up to be under the log viewer (As the log viewer is no longer increasing the height of the content area).

I'm not sure what to do, it should all be css related I believe.

Any help would be much appreciated!

Answer 1

Try this: http://jsfiddle.net/h4C2p/

EDIT: Sorry, that won't work for different widths. Here is one that works: http://jsfiddle.net/h4C2p/1/

Answer 2

if you don't mind setting a height for the content area, set it for the parent of the element of wherever you show the log.

or, don't wrap everything in one tag. ie. have separate header, content, footer, that normally have the same width and are centered, but when you click expand, the content.. expands