How do I push my bottom links to the bottom of the div?

[sarahbee]

Hi there! Here is the site I'm working on:

http://www.whitecapgraphics.com/bates

What I need to do is get those bottom links to reach the bottom of the off white area. I've been playing around with it for a while now and I just can't seem to make it happen.

CSS:

/*----*/
/* Page layout divs */
/*----*/
#d1 {
background-color: #003366;
float: left;
width: auto;
margin-right: 500px;
background-image: url(images/header_image.jpg);
background-repeat: repeat-x;
height: 107px;
}
#d2 {
background-color: #1F2935;
float: right;
width: 477px;
background-image: url(images/header_bg.gif);
position:absolute;
right: 0px;
}
#head_container {
background-color: #000066;
float: left;
background-image: url(images/header_bg.gif);
height: 107px;
}
#nav_container {
background-color: #1F2935;
float: left;
width: 100%;
background-image: url(images/nav_bar_bg.gif);
height: 30px;
z-index:100;
}
#page_container {
margin: auto;
width: 99.99%;
height: 100%;
min-width: 1000px;
}
#content_container {
background-color: #e4e4e4;
float: left;
width: 100%;
background-image: url(images/content_blue_column_bg.gif);
background-repeat: repeat-y;
background-position: right;
z-index:1;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
#content {
background-color: #e4e4e4;
position: relative;
margin-right:253px;
padding-left: 10px;
padding-right: 10px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: medium;
z-index:2;
}
#right_column {
background-color: black;
float: right;
width: 253px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
}

/*----*/
/*navigation styling*/
/*----*/

* {margin:0; padding:0;} /*Need to lookup this line - prevents the dropdown from sitting off kilt from the nav bar options */

/* the horizontal menu starts here */
div#nav {
width:600px; /* sizes the nav div at a fixed width */
float:left;
background-color:#CCF; /* colors the div */
background-image: url(images/nav_bar_bg.gif);
z-index:200;
}
div#nav li {
float:left; /* causes the list to align horizontally instead of stack */
position:relative; /* positioning context for the absolutely positioned drop-down */
list-style-type:none; /* removes the bullet off each list item */
border:1px solid black; /* creates dividing lines between the li elements */
font-family:Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: bold;
min-width: 126px;
text-align:center;
height:26px;
z-index:300;
}
div#nav li:first-child {
border-left:1px solid; /*the first vertial line on the menu */
}

div#nav li:hover {
background-color:#D1C9B9; /*sets the background of the menu items */
}
div#nav a {
display:block;
margin-top:auto;
margin-bottom:auto;
padding:1px 6px; /*creates space each side of menu item's text */
text-decoration:none; /* removes the underlining of the link */
color:#D1C9B9; /* sets the type color */
vertical-align: middle;
height: 100%;
line-height: 24px;
font-size:small;
}

/* the menu ends here */
/* the drop-down starts here */
div#nav ul li ul {
margin:0;
z-index:900; /* puts drop-down on top of div - Safari needs this as menu is 1px higher */
position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
border-right:0; /* stops SCBs drops having two right borders - they inherit the border, IE doesn't */
left:-1px; /*aligns the drop exactly under the menu */
top:28px;
height: auto;
}
#pyt ul li {
background-color:#B3916B;
}
#h ul li {
background-color:#1F2935;
}
#ri ul li{
background-color: #827977;
}
#bn ul li{
background-color: #455D67;
}


div#nav ul li ul li {padding:0;
width:100%; /* makes the list items fill the list container (ul) */
border-left:1px solid; /* three sides of each drop-down item */
border-bottom:1px solid;
border-right:1px solid;
z-index:1000;
height:auto;
}
div#nav ul li ul li a {
padding:1px .5em;
font-size:small;
text-align:left;
vertical-align:middle;
display:block;
color:#D1C9B9; /* sets the type color */
line-height:normal;
}
div#nav ul li a:hover ul li a{
color:#D1C9B9; /* sets the type color */
}
div#nav ul li ul li:first-child {
border-top:1px solid; /*the top edge of the dropdown */
}
/* make the drop-down display as the menu is rolled over */
div#nav ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#nav ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */
div#nav ul li:hover a {color:black;}


/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#nav ul {
float:left; /* makes the ul wrap the li's */
border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
}

/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html div#nav ul li ul {
border-top:1px solid #069;
border-left:0px; /* stops the drop inheriting the ul border */
}

/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you don't have pop-outs */
@media all and (min-width: 0px){
body div#nav ul li ul {padding-bottom:22px;}
}
/*end Opera hack */
/* END OF HACK ZONE */
/* the drop-down ends here */
/* END OF LIST-BASED MENU */


/*----*/
/*Formatting Styles*/
/*----*/

#h {
background-color: #1F2935;
}
#ri {
background-color: #827977;
}

body {
background-color: #1F2935;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#pyt {
background-color: #B3916B;
}
#bn {
background-color: #455D67;
}

#content #flash_map {
text-align: center;
padding: 0px;
height: 490px;
width: 660px;
}
.content_div {
width: 80%;
padding: 2px 10px;
border-width: 1px 4px;
border-style: solid;
border-color: #000000 #827977;
margin: 15px auto;
font-size: small;
}
a:link {
color: #C64F00;
text-decoration: underline;
}
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
#footer {
margin-bottom: 5px;
text-align: center;
font-size: small;
}

a:hover {
color: #1F2935;
text-decoration: none;
}
a:visited {
color: #827977;
}


Any help is greatly appreciated. I'm often amazed at how helpful the web developer community is, and it makes me feel a little more hope for the world. So thanks guys!

[sarahbee]

I'm also boggled as to why there is a massive gap between the two paragraphs on this page:
http://whitecapgraphics.com/bates/amenities.php

I guess it must have something to do with <br clear="right" />

Can anyone fill me in?

[sarahbee]

Well, I moved the image and the clear to the left and it is working now. I think it must have had something to do with my divs in the right hand column. I'd still love an explanation if anyone has one, so I can deal with it in the future.

And I still am looking for any help with the original issue. :D *kisses feeties*

[koyama]

Hi there! Here is the site I'm working on:

http://www.whitecapgraphics.com/bates

What I need to do is get those bottom links to reach the bottom of the off white area. I've been playing around with it for a while now and I just can't seem to make it happen.
Yes, this is possible, but involves a few tricks. I do think that before start on this you should get the rest of the code working properly. Have you looked at the page in IE6? When you see it, I tell you that you will no longer worry about the footer. The page is all over the screen.

Some things to start with. Start removing the red parts:

#page_container {
margin: auto;
width: 99.99%;
height: 100%;
min-width: 1000px;
}
#content_container {
background-color: #e4e4e4;
float: left;
width: 100%;
background-image: url(images/content_blue_column_bg.gif);
background-repeat: repeat-y;
background-position: right;
z-index:1;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
}

This kind should not be necessary and when I see this kind, it makes me suspicious :D

Also, the align attribute should no longer be used (even if you may pass validation) since they might be causing problems in Explorer when mixing together with CSS. Solve things purely with CSS whenever possible.

<img src="images/header_bg.gif" align="right" />

[sarahbee]

Well dang. I'd had it working just peachy in IE6, I guess I managed to screw it up in the meantime. I'll try to fix that stuff up.

Once it's fixed I'll repost my plea for help with the footer.

[sarahbee]

Okay, fixed the glaring errors all up, and I now have three questions:

1) You mentioned I should remove the width: 99.99% and the width:100% attributes. The reason they are there, is if I let it all do it's thing without the 99.99%, the page gets a lovely horizontal scroll bar for like an extra pixel or two of the page. I've experienced this before, and I totally know there must be a simple answer to why it does this, but instead of bothering someone with my noobly question I just solved it by putting the whole page in the 99.99% container. If you can tell me why it gets the hori bar and how I can fix that, I will gladly and greatfully axe those annoying width attributes.

2) I'm having an issue with the drop down menus in IE6. Actually it may be IE7 too...let me go check on my happy IE7 desktop....nope, just IE6 it seems. They don't seem to want to drop down. I thought maybe it was an issue I had previously reappearing, where the z-index bug was causing them to disappear behind the content. Just to test I moved them up 20 pixels, but alas, they just don't seem to want to become visible.

3) The original issue with how I get the footer to push down. Is this achieved by clearing?

[sarahbee]

Okay I fixed number 2 with csshover.htc.

Any help with #1 and #3?

[sarahbee]

Okay, it's cheap and evil of me to bump, but I'm still looking for help. So bump! I promise I'll only do it once, then relieve you all of the burden of my problems.

[koyama]

I can see you have improved your code. That is good.
1) You mentioned I should remove the width: 99.99% and the width:100% attributes. The reason they are there, is if I let it all do it's thing without the 99.99%, the page gets a lovely horizontal scroll bar for like an extra pixel or two of the page. I've experienced this before, and I totally know there must be a simple answer to why it does this, but instead of bothering someone with my noobly question I just solved it by putting the whole page in the 99.99% container. If you can tell me why it gets the hori bar and how I can fix that, I will gladly and greatfully axe those annoying width attributes.
The horizontal scrollbar is usually caused by applying width: 100% while at the same time giving the element padding and/or border. Remember that the effective width is the sum border-left-width + padding-left + width + padding-right + border-right-width. I suspect that this is what you have experienced previously.

This case seems to be different, however. I tried to remove width: 100% from your styles and lo and behold you are right: I see a horizontal scrollbar in Firefox 2.0.0.2. But not in IE.

The <br> element is the problem. In Firefox this element in special situations adds a 1 pixel gap at the end of the line where it is inserted. This must be considered a bug. I have seen this before, but in a different situation. This is one more good reason to not use the br element. At this point I should mention that you are also using this element to add whitespace on the page. You shouldn't be doing this. Use margins and paddings instead.

Not good:

<div id="head_container">
...
</div>
<br clear="all">
<div id="nav_container">
...
</div>

Good:

#navcontainer {
clear: both;
}


<div id="head_container">
...
</div>
<div id="nav_container">
...
</div>

You still need to get rid of the align attributes. These are not even allowed in the strict document type that you have specified.

Not good:

<img src="images/r_column_image_b.jpg" width="253" height="189"
align="right" alt="" />
Good:

img {
float: right;
}


<img src="images/r_column_image_b.jpg" width="253" height="189"
alt="" />
3) The original issue with how I get the footer to push down. Is this achieved by clearing?
I will see if I can show you an example. In the mean time you can try to fix some of the issues I mentioned plus get your document validated.

[sarahbee]

Thanks, I'll work on that this weekend.