CSS - Repeat block to bottom?

[P-Worm]

Hey sorry to bother you guys, but I know there are some real geniuses here and I'm having an issue. If you can spare the time, have a quick look.

http://www.eng.utah.edu/~thomast/

I have to issues in my CSS I can't seem to resolve. The problem is that the grey navigation column on the left doesn't go all the way to the bottom of the page. Here's my CSS code for the section:

.navigation {
	text-align: left;
	background: RGB(102,102,102);
	width: 150px;
	position: absolute;
	left: 0px;
	height: 100%;
	border-top: 5px solid RGB(170,0,0);
	padding-left: 10px;
}

Is the problem that I have absolute positioning on instead of relative? I've been playing with this for a while and can't seem to figure it out!

Thanks in advance.

P-Worm

 

[SrWebDeveloper]

You used absolute positioning for both div.navigation and div.main elements, which is outside the flow of the page, which means such content is not constrained in terms of width or height by other elements.

The short and lazy fix is to simply add padding-bottom: Xpx and set "X" to a value until it lines up with the bottom of div.main. Of course in the future if you edit either content area, you'll need to redo that value. Or set static heights for both, matched. Either is not a great solution long term if the content keeps changing in size.

The long term fix is to learn more about absolute vs. relative positioning (which is the default) and use container wrappers properly. You have a content div wrapped around navigation and main div's, it has margins set and even width, but it doesn't matter due to the absolute positioning. I included some links in the sticky topic of this forum to learn about the things I'm mentioning here including alignment tips both vertical and horizontal.

-jim