So, I'm making a page with navigation bars on the left and the right, and I want them to extend to the bottom of the page regardless of the length of the content of either the nav bar, or the page content. Right now my navigation is done with a table. I've tried setting the height attribute to 100% to no avail. If possible, I'd like to do this with CSS, in a browser independent way. Any suggestions?
Thanks in advance
It would be helpful if you had an example for us to look at but the easiest way to give the impression that a "bar" goes the length of the page is to put a bgcolor on the cell so that it matches. if you want an image to extend the full length of the cell you can use a repeating bgimage.
Both of these can also be done with css as well and there are lots of good examples out there just google css 3 column layouts. http://www.saila.com/usage/layouts/
Apologies. A testing version of the page I'm working on can be found at http://www.prism.gatech.edu/~gtg216r/oagt.html If you'll notice the nav bars to the left and the right (in old gold) they don't extend to the bottom of the page. They are colored just fine, but the table ends and I'm left with blank space at the bottom. I couldn't find any solutions on the link you provided (although I may have just missed them) Any more help?
I figured out how to do this. The best way is to us a div, instead of a table. (which really cut down on filesize and makes it render faster anyway :mrgreen: ) the code for the right nav bar is included below.
#right {
position: absolute;
top: 0px;
right: 0px;
width: 15%;
min-height: 100%;
background-color: #B5A642;
}
Unfortunately, IE6 doens't render this correctly. (Curse you, Microsoft!) Anyone know of a hack to make this work in IE also?
>Anyone know of a hack to make this work in IE also?
Use a background image with a different color for the navigation bar. Repeat it down the page, then set up your divs so that they fit nicely onto the image. The effect is a perfect navigation bar that goes all the way from the top to the bottom regardless of page length or window size.
>regardless of page length or window size.
While a background image will work regardlesss of page length, I'd have to disagree about window size. My columns are relative width (and I'd like to keep them that way) which means that someone viewing on a 800x600 might see the "bar" fine, but someone on a 1280x1024 resolution like me will notice that something's amiss. Not to mention that I have a nav bar on both sides of the page, and then my background image will either only cover one of them, or I'll run into the window size problem again
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.