CSS help

[HexElffilter]

Hopefully someone on here knows a little more about CSS than I do.

http://img101.imageshack.us/img101/5011/cssk.gif

The image above shows my page.
As you can see the navigation is overlapping at the bottom.
What I want to do is stretch to the length of the page, but also allow it to resize depending on the screen res.

This is what I have atm.

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Trebuchet MS, Verdana, Georgia;
    font-size: small;
    background-color: #fff;
    margin: 10px;
}

#header {
    height: 115px;
    background-color: #fff;
    background-repeat: no-repeat;
    border-bottom: double 2px #00774A;
}

#container {
    width: 790px;
    margin: auto;
    border: solid 1px black;
}

#content {
    padding: 10px;
    background-color: #fff;
    margin-left: 15em;
}

#navigation {
    float: left;
    list-style-type:none;
    margin: 0;
    padding: 0;
    width: 15em;
}

#footer {
    height: 50px;
    background-color: #fff;
    font-size: x-small;
    text-align: center;
    border-top: solid 1px #00774A;
}

        <div id="container">
            <div id="header">
            </div>
            <div id="navigation">
                <asp:Accordion ID="Accordion1" runat="server" SelectedIndex="0" CssClass="accordion"
                    HeaderCssClass="header" ContentCssClass="content">
                </asp:Accordion>
            </div>
            <div id="content">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            <div id="footer">
            </div>
        </div>

Also, does anyone know if I can use the :active pseudo-class on Accordion panels?

Thanks

 

[Tripnologist]

Could you add an image of how you would like it to look?

 

[HexElffilter]

Hopefully this will help.

http://img695.imageshack.us/img695/1470/layouti.gif

If possible I want the page to fill the browser, rather than being dependant on the content.

 

[FabienO]

navigation and content in their own div.

If you want a full length background color, use a background image on the div surrounding them that repeats vertically.

 

[Tripnologist]

As Fabien has said above, you'll use a background image to create the illusion of full height.

The technique is called Faux Columns.
http://www.alistapart.com/articles/fauxcolumns/

 

[HexElffilter]

I've managed to stop the navigation from overlapping now, by adding a wrapper div. I've also added a fluid width by adding min-width and max-width.

I've uploaded it onto my web host so you can see.

http://www.hexasp.net/test/Default2.aspx

So if I now wanted a fluid height would I have to use a background image?