100% Height & Positioning +Misc

HTML & CSS
1

I’ve seen this asked in different ways before, but not necessarily this case. I have this current layout:

http://hippo.arvixe.com/~bgmh1986/site/

Now, everything looks great down to the content area (past the RV splash image). I can’t seem to push my table all the way down to the bottom using any form of 100% height. It seems as if my container (#primary) is set at 100%, as is every element in it. The only way the container gets pushed down is if I fill up the #main area with lots of stuff. However this somehow throws my two sidebars out of alignment as well. Which the right sidebar won’t even align properly (seems like it’s “clearing” the #main div and getting pushed after it). If someone could help me with some ideas on this that would be great. It seems as if #primary is not encompassing everything that’s actually under it.

Another thing I have been trying to achieve is some padding on the links in the nav bar. I don’t want to pad the links down, as it would make a ghost area clickable underneath the nav area.

Thanks in advance for all of your help.

2

For the first problem, try adding this:

#primary {
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  box-shadow: 0 0 20px 3px #000000;
  clear: none;
  height: 100%;
  margin: auto; width: 800px; 
  [COLOR="#FF0000"]overflow: hidden;[/COLOR]
}

Another thing I have been trying to achieve is some padding on the links in the nav bar. I don’t want to pad the links down, as it would make a ghost area clickable underneath the nav area.

So what do you want to do, then? It’s not quite clear. Perhaps try top and bottom margin.

3

The first thing kind of worked, but still only goes to 100% height when there is content that goes down that far. I’d like to get the bottom shadow not even visible somehow.

And basically I’m trying to move the text to the center of the nav buttons, but they’re automatically generated with the wp_nav_menu() function.

Thanks for your help!

4

If you change the height of #access a to line-height, the anchor text will be in the vertical centre.

#access a {
display: block;
line-height: 80px;
padding: 0 1em;
text-decoration: none;
color: white;
text-shadow: black 1px 2px 1.5px;
}
5

I was playing around with that. Unfortunately it only works for single lines. Any multi-lined link is skewed by this a lot.