HTML Forum

**stingray89** · 05-30-2009, 11:49 AM

Hello,

I need help with my navigation menu. I need it to stretch the full length as the content area.

Here is my css code

Code:

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

#header {
    background-image: url(../img/logo.png);
        background-repeat: no-repeat;
        background-color: orange;
    height: 8em;
}
#header img {
        position: relative;
        left: 550px;
}

#nav {
    background-image: url(../img/menu.jpg);
        height: 100%;
    width: 20%;
        float: left;
}
#nav a {
        text-decoration: none;
        color: black;
        font-family: verdana;
        font-size: small;
        display: block;
        padding: 15px;
}
#nav a:hover {
        background-image: url(../img/back.png);
}
#nav #on {
        background-color: red;
}
#content {
    background-color: tan;
    height: auto !important;
        height: 100%;
    width: 80%;
        float: right;
}

#wrapper {
    width: 800px;
    background-color: transparent;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}

#footer {
        color: white;
        font-size: small;
        font-style: italic;
        text-align: center;
        width: 800px;
        position: relative;
        clear: both;
    background-color: maroon;
    height: 4em;
}

and here is my index.php code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>Fall For The Arts</title>
    <link rel="stylesheet" href="css/reset.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body>
    
    <div id="wrapper">
    
        <div id="header"><img src="img/ballet.png" alt=""></div>
        
        <div id="nav">
            <a href="#" id="on">Home</a>
            <a href="#">Organizations</a>
            <a href="#">Where is it?</a>
            <a href="#">Location</a>
            <a href="#">About</a>
        </div>
        
        <div id="content">
            <p>Your content goes here.</p>
            <p>Your content goes here.</p>
            <p>Your content goes here.</p>
            <p>Your content goes here.</p>
                                    <p>Your content goes here.</p>
            <p>Your content goes here.</p>
            <p>Your content goes here.</p>
            <p>Your content goes here.</p>
                                    <p>Your content goes here.</p>
            <p>Your content goes here.</p>
            <p>Your content goes here.</p>
            <p>Your content goes here.</p>
                                    <p>Your content goes here.</p>
            <p>Your content goes here.</p>
            <p>Your content goes here.</p>
            <p>Your content goes here.</p>
                                    <p>Your content goes here.</p>
            <p>Your content goes here.</p>
            <p>Your content goes here.</p>
            <p>Your content goes here.</p>
        </div>

        <div id="footer">
            <p>Copyright &copy; 2009</p>
        </div>

    </div>
    

    
</body>

</body>
</html>

**World** · 05-30-2009, 12:39 PM

You need to create a tiled background image of the same color as your column.

This creates the illusion that your column extends all the way down.

All info on how to do this you can find here:

http://www.alistapart.com/articles/fauxcolumns/

**LadynRed** · 05-30-2009, 12:51 PM

You might want to read up on the faux columns method, it's easy and works like a charm.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!