HTML Stretch header and footer to long content without JS

Question

I'm having a small issue here, I've made a jsfiddle for you guys to play with it: http://jsfiddle.net/darkguy2008/NQUz8/

The problem I have is that when there is unavoidable long content, the header and footer don't stretch to it, but to the maximum browser window.

I need to find a way to make it stretch, I've had an idea of having the header and footer be part of the content div instead, but if the content is shorter than the browser window they wouldn't stretch to 100% width of the browser window and that's what I don't want.

Also, the title/subtitle of the page can be longer than the content so that wouldn't help either :/

I would love to change the design, but it's for a report website, I can't put it with a margin: 0 auto; because the idea isn't to center the website or to make the reports a fixed width (because they can't, either).

The idea is also to avoid JS. I know I can fix the widths using JQuery, but the project can also be used by external clients so we can't enforce them to use JS. Weird I know but I've seen cases where the stupid sysadmins block JS and we can't do much about it, except to make it work.

I can use HTML5 and CSS3, so if there's a way to do it with those two technologies it would be great :)

Any ideas are welcome!

HTML:

<header>
    <div class="wrap">
        <table border="0">
            <tr>
                <td rowspan="2">
                    <img src="http://dummyimage.com/230x100/000/fff&text=LOGO" align="left" style="border-width:0px;" />
                </td>
                <td>
                    <h1>title 1 lololol</h1>
                </td>
            </tr>
            <tr>
                <td>
                    <h2>subtitle omgomgomgomgomg</h2>
                </td>
            </tr>
        </table>
    </div>
    <div id="menu">menu goes here omg</div>
</header>
<div>contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</div>
<footer>
    <div class="wrap">
        <p>Footer goes here o.o"</p>
    </div>
</footer>

CSS:

/*********************/
/** RESET */
/*********************/
*  
{
    padding: 0;
    margin: 0;
    /*border: 0;*/
    font-family: Arial;
}

/*********************/
/** Main CSS */
/*********************/
body 
{
    font-family: Arial;
    font-size: 10pt;
}

.wrap 
{
    position: relative;
    margin: 0 0;
    width: 640px;
}

header, footer
{
    background: #0f6;
    float:left;    
    min-width:100%;
}

#menu
{
    min-width: 100%;
    border-top: 2px solid red;
    border-bottom: 2px solid red;
}

th, td { padding: 0; }
table { border-collapse:collapse; border-spacing: 0; }

Answer 1

Basically you have to include the content and the footer inside your "header" element so your content will make it grow.

HTML

<div>
<header>
    <div class="wrap">
        <table border="0">
            <tr>
                <td rowspan="2">
                    <img src="http://dummyimage.com/230x100/000/fff&text=LOGO" align="left" style="border-width:0px;" />
                </td>
                <td>
                    <h1>title 1 lololol</h1>
                </td>
            </tr>
            <tr>
                <td>
                    <h2>subtitle omgomgomgomgomg</h2>
                </td>
            </tr>
        </table>
    </div>
    <div id="menu">menu goes here omg</div>
    <div class="content">contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</div>
    <footer>
    <div class="wrap">
        <p>Footer goes here o.o"</p>
    </div>
</footer>
</header>


</div>

Modifications in CSS:

.content
{
    background: #FFFFFF;
}

Here is a working fiddle:

Fiddle

Answer 2

As in the last post, use the word-wrap here and set your width to whatever you want it to. I set it for you at 100% but it only goes to whatever the largest width you have. http://jsfiddle.net/NQUz8/2/

 <div style="word-wrap:break-word; width="100%;">content here</div>

I would use some type of css class or id if you can. I just used style here to show you how it works.