Minimal Space Between Bottom Side Box and the Footer?

Is there a way to make sure that there will always some minimal space between the bottom-most side box and the footer?

Case in question: In certain circumstances, the bottom bar of the sidebox frame (aka .leftBoxContainer: border-bottom in style sheet) touches the footer creating something that I don't perceive as very aesthetic. See example here:

My question: Is there a way to guarantee minimal spacing (in the background color) between the bottom-most side box and the footer?

If so, how do I accomplish that?

Thanks,
Daniel

Try adding some margin to:-

#navSuppWrapper

(This is probably nested in your stylesheet with others):-

**#navSuppWrapper, #navCatTabsWrapper
{
**
So you may have to add:-

#navSuppWrapper
{
margin-top: 0.5em;
}

... and you add it UNDER the nested reference. (IE: It must be read by the browser AFTER other references to it - particularly if margins are specified.)

Thank you very much - it works!

I just added your suggested line such that it resulted in the following:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
        margin: 0em;
        [B]margin-top: 0.5em;[/B]
        background-color: #abbbd3;
        background-image: url(../images/tile_back.gif);
        padding: 0.5em 0.2em;
        font-weight: bold;
        color: #ccffff;
        height: 1%;
        }

I don't know what you meant by nesting (I don't see #navSuppWrapper nested in this file, stylesheet.css), but the above change provides an acceptable result for me (although it adds the same spacing at the top bar (header), too.

Daniel

zcnb:

... (although it adds the same spacing at the top bar (header), too.

Thats what I meant... because the following styles:-

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper

... are all SHARING the declarations:-

** margin: 0em;
margin-top: 0.5em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
font-weight: bold;
color: #ccffff;
height: 1%;
}**

If you want the declaration
**
margin-top: 0.5em;**

to apply ONLY to #navSuppWrapper

Then you must do what I suggest in my earlier posting.

I just did what you suggested and it works now even better! Thank you!

To clarify, I restored the

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
to its original state, and just added the following below it:

#navSuppWrapper
{
  margin-top: 0.5em;
}

It adds the desired spacing only the Footer, not the Header.

Hi!

I did exactly as suggested in this post to resolve my footer spacing issue, but it did not work for me. Can you take a look at my CSS and tell me what I did wrong?

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #CC0099;
background-image: url(../images/tile_back.gif);
padding: 0.2em 0.1em;
font-weight: bold;
color: #ffffff;
height: 1%;
}

#navCatTabsWrapper {
background-color: #ffffff;
color: #9a9a9a;
background-image:none;
}

#navSuppWrapper {
margin-top: 1.5em;
}

#navMain ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #ffffff;
white-space: nowrap;
}

#navCatTabs ul li a {
color: #9a9a9a;
}

#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
height: 1%;
border: 1px solid #9a9a9a;
}

#navEZPagesTOC ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
line-height: 1.5em;
}

#navEZPagesTOC ul li {
white-space: nowrap;
}

#navEZPagesTOC ul li a {
padding: 0em 0.5em;
margin: 0;
}

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}

#navMainSearch {
float: right;
}

#navBreadCrumb {
padding: 0.5em 0.5em;
background-color: #ffffff;
font-size: 0.95em;
font-weight: bold;
margin: 0em;
}

#navEZPagesTop {
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

#navColumnOne, #navColumnTwo {
background-color: transparent;
}

Thanks!

cinbou, I looked at your CSS and it seems fine. I couldn't find any difference between what works for me and your version. The only difference that I could notice was the #navSuppWrapper coming immediately after #navMainWrapper, #navSuppWrapper, #navCatTabsWrapper, without #navCatTabsWrapper in between.

Could that effect the display?

You have navSuppWrapper twice. You need to remove the **navSuppWrapper **from:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #CC0099;
background-image: url(../images/tile_back.gif);
padding: 0.2em 0.1em;
font-weight: bold;
color: #ffffff;
height: 1%;

stevesh:

You have navSuppWrapper twice.
I also have navSuppWrapper twice and it works fine for me. My understanding is that this is some form of "inheritance" (as in OO). Am I mistaken?

Aha! Got it to work. I copied the CSS in the wrong spot.

Thanks for your help!