• Locked
2 replies [Last post]
Sun, 2007-07-01 20:31
valamiras
Offline
newbie
Last seen: 15 years 7 weeks ago
Joined: 2007-07-01
Posts: 2
Points: 0

Hey all,

I am having trouble getting my left navigation menu to touch the footer. I have added and removed tags with no satisfactory results. I have left the bare code, and I would like to have the menu on the left continue touch the top of the footer while keeping the vertical border I have given it. I have left in the padding to keep dimensions correct and the border since it is part of why I haven't been able to use other fixes. I have filled the body of the HTML with enough text so the problem is visible. Here is the CSS:

body { margin: 50px 75px 50px 75px; padding: 0px; background-color: #666633; } #container { width: 780px; margin-left: auto; margin-right: auto; background-color: #e4e4da; }

#header {
width: 779px;
height: 40px;
background-color: #666633;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
}

#left {
position: relative;
float: left;
background-color: #c1bf82;
padding: 8px 8px 8px 12px;
width: 75px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}

#content {
position: relative;
float:right;
background-color: #e4e4da;
width: 657px;
padding: 13px;
border-top: 1px solid #000000;
max-width: 683px;
}

#footer {
clear: both;
background-color: #cfcea5;
padding: 5px;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
}

and the HTML:

Sample Page

Home

Writing

Resume

Movies

Links

Resume

Sample Heading
Experience:
It seems that the menu to the left does not want to to touch the bottom footer.).

  • test test test test test test test test test test test test test test.
  • test test test test test test test test test test test test test test.

test test test test test test test test test test test test test test
  • test test test test test test test test test test test test test test

Sample
  • test test test test test test test test test test test.
  • test test test test test test test test test test test test.
  • test test test test test test test test test test test test test test
Text
  • test test test test test test test test test test test test test test
  • test test test test test test test test test test test test test test

I hope my code isn't too messy although I am afraid it might be. Thank you ahead of time for the help and let me know if I have posted incorrectly.

Top
Tags:
Sun, 2007-07-01 23:58
#1
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 44 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You need to read up on equal

You need to read up on equal height columns.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Top
Mon, 2007-07-02 01:07
#2
valamiras
Offline
newbie
Last seen: 15 years 7 weeks ago
Joined: 2007-07-01
Posts: 2
Points: 0

Thanks

Wow, thanks. I never ran across this in my endless searches, probably using the wrong terms. But for anyone wondering I used solution A and it did exactly what I wanted.

Thanks Tyssen.

EDIT:

Actually after reading more I did the background border trick by creating an image with borders so that my website looks reasonable in Internet Explorer.

Top
  • Locked