[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 477
  • Last Modified:

Side column doesn't extend to footer

Hi,

I've had help with this before, but it's still an issue. I have a site with three columns. The left column has a grey background that I want to extend all the way to the footer. The problem is that it doesn't always happen and a white gap appears. It depends on the size of the middle column. Someone here helped me set my left column in my CSS so that it would extend to the footer. That works in most cases, but sometimes my middle column is longer than the set length of the left column, and the white gap appears.

My left column is a part of the template that is not editable, so it's not something that I can change with each page. If I change it in my CSS it of course affects all of my pages, and I don't need or want that. Is there some way I can override this so that I can extend the length of the left column on some pages, but not in all pages? I'm working in Dreamweaver. This is what my CSS looks like.

/* root.css */

/* Table of Contents
------------------------------------
    1. Reset
    2. Elements (a, body, p, etc.)
	3. ID's (#container, etc.)
	4. Classes (.red, .clear, etc.)
	5. Print
	6. Handheld	
	
COLORS
    Main Text:              #3d3d3d
    Army Gold:              #ffd54a
    Army Green:             #7b8738                  
    Light Gray bg:          #f7f7f7
	Fort Polk Green: 		#909078;
------------------------------------*/

/* 1. Reset
------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
}

:focus {
	outline: 0;
}
body {
	background: #f7f7f7;
	color: #000;
	line-height: 1;
}

ol, ul {
	list-style: none;
}

/* 2. Elements
------------------------------------*/
body {
    background: #000000;
    color: #3d3d3d;
    font-family: Verdana, Arial, sans-serif;	
}
a {
    color: #3d3d3d;
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    color: #7b8738;
}

a.nec:hover,a.nec:active {color:#70d2ef;}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}
h1 {
    font-size: 2.6em;
    line-height: 1.2em;
}

h2 {
    font-size: 1.1em;
}
img {
   border: 1px solid #3d3d3d;
}
p {
    font-size: .9em;
    line-height: 1.4em;
    margin: 1.1em 0;
}

ul.multicolumn30, ul.multicolumn20, ul.multicolumn10, ul.multicolumn15, ul.multicolumn12 {
	margin: 0.5em 2em 0.5em 2em;
	padding: 0em;
}

/* 3. ID's
------------------------------------*/
#container {
    background: #f7f7f7 repeat-y;
    font-size: 62.5%;
    margin: 0 auto 14px;
    padding: 14px 0;
    overflow: auto;
    width: 996px;
}
#contentBackground {
  
	background-color:#f7f7f7;
    width: 996px;
    overflow: hidden;	

}

#disclaimer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFF;
	font-style: normal;
	font-weight: normal;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

#disclaimer2 {
	font-size: 18px;
	font-weight: bold;
}
#dropDownNav {
    float: left;
    font-size: 1.1em;
}
#dropDownNav li {
    background: url(../rv4_images/drop_down_border1.gif) no-repeat right;
    float: left;
    display: block;
    height: 2.6em;
    line-height: 2.6em;
    margin: 0 -1px;
    position: relative;
    z-index: 999;
}
#dropDownNav li a {
    display: block;
    padding: 0 15px;
}
#dropDownNav li:hover, #dropDownNav li.sfHover, #dropDownNav li a:active, #dropDownNav li:hover a, #dropDownNav li.sfHover a {
	background: url(../rv4_images/nav_hover_gradient.gif) repeat-x;
    color: #7b8738;
}
#dropDownNav li ul {
    background: url(../rv4_images/drop_down_bg.png);
    border: 1px solid #b6b6b6;
    border-top: none;
    display: none;
    position: absolute;
    left: 0;
    padding: 0;
    top: 29px;
    width: 220px;
}
#dropDownNav li ul li {
    background: none;
    border: none;
    display: block;
    font-size: 0.9em;
    height: auto;
    line-height: 2.6em;
    padding: 0;
}
#dropDownNav li ul li a, #dropDownNav li:hover li a, #dropDownNav li.sfHover li a {
    background: none;
    color: #3d3d3d;
    display: block;
    height: auto;
    padding: 0 0 0 10px;
    width: 212px;
}
#dropDownNav li ul li a:focus, #dropDownNav li ul li a:hover {
    background-image: none;
    background-color: #b4b4b4;
    color: #7b8738;
}
#dropDownNavNS{
	position:absolute;
	top:10px;
 	left:5px;
}
#dropDownNavNS li{
    line-height:15px;
}
#footer {
    background: #4e4e4e;
    clear: both;
	position: relative;
    color: #e3e3e3;
    font-size: 1.2em;
    padding: 5px 10px;
    overflow: auto;
    width: 976px;
    margin-top:125px;
}
#footer a {
    color: #e3e3e3;
    font-weight: normal;
}
#footer ul {
    text-align: center;
}
#footer li {
    display: inline;
    margin-right: 2.4em;
}
#footerLeft, #footerMiddle, #footerRight {
    float: left;
}
#footerLeft, #footerRight {
    width: 200px;
}
#footerMiddle {
    margin: 2.8em 0 0;
    width: 576px;
}
#footerRight {
    text-align: right;
}
#footerRight a {
    color: #ffd54a;
}
#header {
    background: url(../rv4_images/banners/Heroes_Banner2.jpg) no-repeat;
    border-bottom: 1px solid #8f8f8f;
    height: 151px;
    width: 996px;
}

#headerBorder {
    background: url(../rv4_images/banners/banner_column.gif) no-repeat;
	height: 7px;
    width: 996px;
}
#headerCrest {
	background: url(../rv4_images/banners/crest.jpg) no-repeat;
	height: 77px;
    width: 996px;
}
#marquee {   
   background-color:#000000;
   color:#FFFFFF;
   marquee-style: slide;
   marquee-direction: ;   
   font-size: 12px;
   font-family:Georgia, "Times New Roman", Times, serif;
   
}
#headerStar {
    display: block;
    position: relative;
    top: 24px;
    left: 15px;
    height: 102px;
    width: 80px;
}

#leftCol {
    background: #c2c2c2;
	display: inline;
    float: left;	
    width: 196px;
	height: 1500px;	
}
#leftCol .rss, #leftCol .podcasts,  #leftCol .events {
    margin-left: 10px;
}
#leftColNav li {
    font-size: 11px;
    line-height: 2.8em;
}
#leftColNav .level3 {
    border-left: 1px solid #c2c2c2;
}
#leftColNav .level4 {
    background: #fff;
    border-top: 1px solid #c2c2c2;
    padding: 10px 0;
}
#leftColNav .level4 a {
    font-weight: normal;
    line-height: 15px;
}
#leftColNav .level4 a:hover {
    background: none;
    color: #3d3d3d;
}
#leftColNav li a.current {
    background: #4e4e4e;
    color: #fff;
}
#leftColNav li a.current:hover {
    background: #4e4e4e;
    color: #fff;
}
#leftColNav li a.subNav {
    background: #f7f7f7;
    font-weight: normal;
    border-top: 1px solid #c2c2c2;
}
#leftColNav li a.subNav:hover {
    background: #f7f7f7;
    color: #3d3d3d;
}
#leftColNav li#last {
    border-bottom: 1px solid #939393;
    margin: 0.2em 5px 0;
}
#leftColNav li#sections {
    background: #a1a1a1;
    font-weight: bold;
    padding: 0 10px;
}
#leftColNav li a {
    display: block;
    padding: 0 10px;
    width: 176px;
}
#leftColNav li a:hover {
    background-color: #b4b4b4;
    color: #7b8738;
}
#leftColRSS {
    padding: 1em 0;
    margin-bottom: 2em;
}

/* Live Search */
#liveSearch {
position: relative;
background: #525252;
float: right;
height: 2.8em;
width: 19em;
}
#liveSearch input {
color: #737373;
float: left;
font-size: 1em;
height: 1.2em;
margin: 4px 5px;
padding: 0;
}
#liveSearch input#search {
width: 140px;
}
#liveSearch input.close {
background: url(../rv4_images/searchbutton.png) no-repeat 4px 5px;
border: none;
color: #fff;
cursor: pointer;
display: inline;
float: right;
height: 26px;
width: 28px;
margin: 0;
padding: 0;
}
#liveSearchTabs {
position:absolute;
display:none;
cursor:pointer;
top:-22px;
left:-1px;
width:230px;
height:22px;
background: url(../rv4_images/live_search_tab_1.png) no-repeat;
}
#liveSearchTabs li {
height:22px;
display:inline;
float:left;
text-align:center;
color:#fff;
font-size:11px;
font-family: Verdana, Arial, Sans-serif;
padding-top:7px;
}
#liveSearchTabs1 {
width:36px;
}
#liveSearchTabs2 {
width:64px;
}
#liveSearchTabs3 {
width:66px;
}
#liveSearchTabs4 {
width:64px;
}
#liveSearchLeft {
background: url(../rv4_images/live_search_left.gif) no-repeat;
float: left;
height: 2.8em;
width: 6px;
}
#mainContent {	
	float: left;
    padding-bottom: 10px;
	padding-left: 20px;
    width: 480px;

}
#mainContent h1, #mainContent h2 {
    padding: 8px 10px;
}
#mainContent p, #rightCol p {
    padding: 0 10px;
}
#mainContent ul {
    font-size: 1.1em;
    padding-left: 10px;
    padding-right: 10px;
}
#navBar {
    background: #cfcfcf url(../rv4_images/nav_gradient.gif) repeat-x;
    border-bottom: 1px solid #b6b6b6;
    height: 2.8em;	
	
}
#rightCol {
	    background: #f7f7f7;
    display: inline;
    float: right;
    width: 290px;
	
}
#rightCol h2 {
    clear: both;
}
#rightCol ul {
    margin: 1em 0 1em 15px;
}
#rightCol li {
    line-height: 1.2em;
    margin: 0.8em 0;
}
#rightCol li a {
    display: block;
}

#ticker {
	height:20px;
	width:100%;
	background-color:#FFFFFF;
}

#ticker-left {
	background-image:url("../rv4_images/ticker-left.png");
	background-repeat:no-repeat;
	width:29px;
	height:20px;
	float:left;
}

#ticker-center {
	background-repeat:repeat-x;
	width:938px;
	height:18px;
	font-size:15px;
	float:left;
	padding-top:2px;

}

#ticker-right {
	background-image:url("../rv4_images/ticker-right.png");
	background-repeat:no-repeat;
	width:29px;
	height:20px;
	float:right;
}

#wrapper {	
    background: url(../rv4_images/white_bg.gif) repeat-y top center;

    width: 100%;

}

/* CSS Sprite Icons */
.rss {background: url(../rv4_images/icon_sprites.gif)           0px -114px no-repeat;}
.podcasts {background: url(../rv4_images/icon_sprites.gif)      0px -133px no-repeat;}
.events {background: url(../rv4_images/rss_cal2.png)				no-repeat;}

/* 4. Classes
------------------------------------*/
.Bg_text {
	font-size: 12px;
	text-align:left;
	
}
.bio {
	font-size: 14px;
	font-weight :bold;	
}
.block {
    clear: both;
    color: #fff;
    font-size: 11px;
    height: 26px;
    line-height: 26px;
    padding-left: 10px;
    text-transform: uppercase;

}
.bold {
    font-weight: bold;
}
.bordered {
    background: #fff;
    border-top: 1px solid #9b9b9b;
    border-bottom: 1px solid #9b9b9b;
}
.bordered-large {
	font-size: 1.5em;
	font-weight: bold;
	background: #fff;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
}
.bordered-large-nec {
	font-size: 1.5em;
	font-weight: bold;
	color: #70d2ef;
	background: #fff;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
}
.centered {
	padding-left: 0;
    text-align: center;
}
.command {
	font-size: 18px;
	font-weight: bolder;
	
}

.dark-gray {
    background: #4e4e4e;
}
.black {
    background: #000000;
}

.dark-red {
    background: #af2020;
}
.diamondList li {
    background: url(../rv4_images/diamond_bullet.gif) no-repeat 0 2px;
    padding-left: 16px;
    margin: 12px 0;
}

.guardianList li {
    background: url(../rv4_images/diamond_bullet.gif) no-repeat 0 2px;
    padding-left: 16px;
    margin: 12px 0;
	font-size: 9px;
}
.hide {
    display: none;
}
.hide2 {
    position:absolute;
    left:0px;
    top:-500px;
    width:1px;
    height:1px;
    overflow:hidden;
}
.icon_sprite {
    display: block;
    float: left;
    height: 19px;
    margin: 0 4px;
    width: 19px;
}

.leadership {
	padding:15px 15px 0px 15px; 
	font-size:11px;
	border:none;
	}

.light-gray {
    background: #c0c0c0;
    color: #565656;
}
.nec_table_head {
	border-right: 1px solid; 
	border-top: 1px solid; 
	border-bottom: 1px solid; 
	border-left: 1px solid; 
	border-color: #666666; 
	color: #FFFFFF; 
	font-size: 13px;
	font-weight: bold;
}
.nec_tdthinblack {
	border-right: 1px solid; 
	border-top: 1px solid; 
	border-bottom: 1px solid; 
	border-left: 1px solid; 
	border-color: #000000; 
	font-size: 12px;
	font-weight: 500;
	font-family:Arial, Helvetica, sans-serif;
}
.no-border {
	border: none;
}
.rss, .podcasts, .events {
    display: block;
    height: 19px;
    line-height: 19px;
    margin: 0.4em 0;
}
.rss .textLink, .podcasts .textLink, .events .textLink, #email .textLink, #print .textLink {
    margin-left: 24px;
}



.slidingDiv {
    height:100px;
	width:196px;
    background-color:  #c2c2c2;
   
    margin-top:10px;
   
}
 
.show_hide {
    display:none;
}

.strong_nec {
	color: #1a72a2;
	font-weight: bold;	
}

.urbangreymenu{
width: 190px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(../rv4_images/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

.urbangreymenu .headerbar a{
text-decoration: none;
color: white;
display: block;
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}


/* 5. Print
------------------------------------*/
@media print {
    body {
        background: #fff;
    }
    #header, #navBar, #breadCrumbs, #leftCol, #rightCol, #footer {
        display: none;
    }
    #mainContent {
        overflow: visible;
    }
}

/* 6. Handheld
------------------------------------*/
@media handheld {
    
}

Open in new window

0
savache27
Asked:
savache27
  • 6
  • 6
  • 2
1 Solution
 
Jason C. LevineNo oneCommented:
Is there some way I can override this so that I can extend the length of the left column on some pages, but not in all pages?

You would have to apply a different class on "some pages" to get a different behavior.

Not sure how you are applying the above CSS anyway.  If you have different height columns across the site, you may need a javascript-based solution to always have things equal out.
0
 
COBOLdinosaurCommented:
give either the body or the html a background color of gray in the stylesheet.  Then when the column comes up short, there will not be a white gap because the parent element background will show.


Cd&
0
 
Jason C. LevineNo oneCommented:
Pfft.  Stop giving simple, easy to implement answers.  You make the rest of us over-complexity people look bad :)
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
savache27Author Commented:
The way the page is, I don't think changing the background color would help. Would it help to see the page? I'm on a testing server right now, but I can upload it to a production server. Or just include the code here.
0
 
COBOLdinosaurCommented:
Seeing the page sounds like fun.  I'd really like to see what kind of a mess prevents a simple solution from working.  

Cd&
0
 
savache27Author Commented:
Mainly because I don't want the rest of the content to have the color of the left column.
0
 
COBOLdinosaurCommented:
Which means you haven't set the background on anything else, and that is your real problem.

Cd&
0
 
savache27Author Commented:
Okay, here is a link to the page. I still have to fix the table in the center. I just copied it over from their old page, and was trying to put it into the new template.

http://www.jrtc-polk.army.mil/generalstaff.html
0
 
COBOLdinosaurCommented:
Well seeing the page I don't see why you think the white below the column is a problem.  You have white space all over the place.  To me the expanse of gray under the image is a lot uglier, then the white.  

There is nothing wrong with the page.  You are niether going to gain traffic or lose traffic because of the white at the bottom of the left column, no one cares but you.  If it's not broke, then don't fix it.  I you must have it that way then set the background of the content, and any other thing you want white to white, and set the body to gray.

I can't believe the time spent on something this trivial.

Cd&
0
 
savache27Author Commented:
I'm not the one who wants the gray column to extend to the footer. And you didn't have to waste your time on anything. It's not as if you are being forced to participate. If you don't want to spend time on a question then don't bother answering. I appreciate your help, but I don't really think I deserve the attitude. Not everyone has your level of expertise.
0
 
COBOLdinosaurCommented:
I don't really think I deserve the attitude.

What attitude?  I gave you solutions.  If you don't like the idea of doing it right by managing the backgrounds, then there is an earlier suggestion to fix it with scripting on every page. Based on your last post I would say your biggest problem is whomever wants it to extend down.  If they are calling the shots then, you do what you have to do. There is no quick fix  solution, because somewhere along the line planning failed to anticipate the current requirement.

Cd&
0
 
savache27Author Commented:
I can't believe the time spent on something this trivial.

That's what I was referring to. I have no problem with doing it right and managing the backgrounds. I plan to attempt just that.
0
 
COBOLdinosaurCommented:
Yeah okay I can see how that might be considered offensive.  It was not intended to be anything but me calculating resource cost against traffic gain.  So all I can do is apologize and wish you no further problems trying to fix it.

Cd&
0
 
savache27Author Commented:
It's okay. Like I said, I really do appreciate the help.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now