[css-d] Sidebar issues

[Todd Richards]

Hello -

Regardless of the struggles I have had with CSS, I still find myself trying
more and more.  In all actuality, I probably won't build a site with tables
again!  However, with that said I'm having another issue that I can't seem
to figure out and I'm hoping the experts here might give it a look.  It
might be the answer is right in front of me but I've been looking at it too
long.

I'm working on a new site and have a right-hand sidebar for misc content.
The problem I have is that if the main content window is not full of content
(or more content than the sidebar), the sidebar flows down the page, over
the footer, etc.  Besides looking awful, it's not acceptable!  It happens in
Firefox, IE, etc.

The development site is at:  http://obb.danstuenzi.com. I have included the
CSS below if anyone has any thoughts on this.

Thanks!

Todd







*************   
CSS for site
*************   


html {
        margin: 0;
        padding: 0;
}

body {
        margin: 0;
        padding: 0;
        background-color: #ab9877;
        background-image: url('/images/bg_grad_brown.png');
        background-repeat: repeat-x;
        font: 62.5% Arial, Verdana, Helvetica, sans-serif;
}

/* OUTER SHELL */
#shell {
        width:950px;
        margin: 0px auto;
        padding:0px;
        text-align:left;
        background-color: #fff;
        border-right: 2px solid #081734;
        border-left: 2px solid #081734;
}
/********************************************************************/


/* TOP NAVIGATION LINKS AND DATE STYLES */

#header {
        background-color: #081734;
        height: 125px;
        color: #fff;
}

#header ul {
        margin: 10px 10px 0 0;
        padding-top: 0;
        text-align: right;
        float: right;
        
}

#header li {
        display: inline;
}

#header a:link, #header a:visited, #header a:active {
        text-decoration: none;
        color: #fff;    
}

#header a:hover {
        text-decoration: underline;
}

#date {
        clear: right;
        font-weight: bold;
        font-style: italic;
        margin: 80px 10px 0 0;
        padding: 0 0 0 15px;
        float: right;
        text-align: right;
}

/********************************************************************/

/* TOP SECTION WHICH INCLUDES THE MENU AND SLIDESHOW AREAS. SEE
\INCLUDES\P7PM\p7pmh3.css FOR SPECIFIC MENU STYLES */

#top {
        position: relative;
        margin-top: 2px;
        padding: 0;
        height: 250px;
        border-bottom: 2px solid #081734;
        border-top: 2px solid #081734;  
        background-color: #081734;
}


#menu {
        margin: 0 650px 0 0px;
        width: 100%;
        height: 100%;
        margin: 0px 0px 10px 0px;
        padding: 0px;
        background-image:  url('/images/menu_bg.gif');  
        background-repeat: repeat-y; 
}

#slideshow {
        position: absolute;
        top: 0;
        right: 0;
        width: 650px;
}


/* THIS IS THE MAIN CONTENT AREA.  INCLUDES THE CONTENT AND SIDEBAR */
#main {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        margin: 10px 0px 15px 0px;
        padding: 0px;
        height: 600px auto;
}

#content {
        margin: 0 275px 0 15px;
        background-color: #fff;
        padding: 15px;
        border: 1px solid #b9d2e3;
}

#sidebar {
        position: absolute;
        top: 0;
        right: 0;
        width: 240px;
        margin: 0px 15px 0px 0px;
        padding: 0px;
        background-color: #ccc;
        background-image: url('/images/sidebarbg.gif');
        border: 1px solid #433d32;

}

#sidebar h3 {
        font-size: 1.4em;
        /*color: #433d32;*/
        color: #fff;
        padding: 3px;   
        margin: 0px 0px 0px 0px;
        background-image: url('/images/bg_title.png');
        background-repeat: repeat-x;
}

#sidebar .inner, #sidebar p {
        padding: 5px 10px 10px 10px;
}

/* FOOTER STYLE */
#footer {
        clear: both;
        padding: 10px;
        background-color: #081734;
        text-align: center;
        color: #fff; 
        vertical-align: middle;
        font: normal 1em Arial, Verdana, Helvetica;
        /*border-top: 2px solid #c5c8e3;*/
        
}

#footer a:link, #footer a:visited, #footer a:active {
        text-decoration: none;
}

#footer a:hover {
        text-decoration: underline;
}

#footer a.footer:link, a.footer:visited, a.footer:active {
        text-decoration: none;
        padding-right: 15px;
        padding-left: 15px;
        color: #fff;
        font-weight: bold;
}

#footer a.footer:hover {
        text-decoration: underline;
}

#footer_info {
                padding-top:15px;
}
/********************************************************************/

p {
        font-size: 1.2em;
}

h1 {
        font-size: 1.75em;
        margin-top: 10px;
}

h2 {
        font-size: 1.5em;
        margin-top: 0;
}

h3 {
        font-size: 1.15em;
        margin-top: 0;
        margin-bottom: 3px;
}

h4 {
        font-size: .9em;
        margin-top: 0;
        margin-bottom: 3px;
}


/* This will indent 15px */
.indent15 {
        margin-left: 15px;
}

/* This will indent 25px */
.indent25 {
        margin-left: 25px;
        padding-bottom: 2px;
}

.indent40 {
        margin-left: 40px;
        padding-bottom: 2px;
}



______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/