Automatic Growing

[magicyte]

ATTENTION! PLEASE READ WHOLE THREAD CAREFULLY!

Ok, so on my website, http://beta.magicyte.freehostia.com/, there's a big css problem. I have my navigation for articles on the left and my main content div on the right. They both SHOULD have a minimum height of 600 pixels, though in Internet Explorer, the height sizes down to the text. That isn't my concern quite yet. Note that there is a footer at the bottom. I would like that to remain exactly 7 pixels below the main content div, and I also want the navigation bar on the left to stay the same height as the main content div on the right. The main content div has an overflow: auto; so that extra information can be neatly extended with the div. Even so, I would like the navigation bar to stay the exact same height as the main content div. Again, their heights are both 600 pixels. The footer at the bottom should always stay 7 pixels below the main content div and the navigation bar. I've tried extending the main content div to see if the footer would move along with it (with margin-top: 7px; as a property), but it didn't work. Here is a screenshot:

http://localhostr.com/files/d1089c/Magicyte%20Beta_1236558274499.png

Also take note that I have only implemented the styles for Firefox (I will soon tackle Internet Explorer), and the problem you see in the screen shot is not on the site. I modified the index.html. How should I approach this? Is this, what I would like, even POSSIBLE?! Here's the css:


body {
background-color: #444444;
}
.header {
position: absolute;
left: 3%;
top: 10px;
width: 93%;
padding: 5px;
background-color: #7ec209;
border: 1px solid #353535;
color: #353535;
font-size: 60px;
font-family: Georgia;
text-align: left;
}
.menu {
position: absolute;
left: 3%;
top: 100px;
width: 93%;
padding-top: 7px;
padding-left: 5px;
padding-bottom: 7px;
padding-right: 5px;
background-color: #a3fe00;
background-image: url(images/pretty.png);
background-repeat: repeat-x;
border: 1px solid #353535;
color: #353535;
font-size: 16px;
font-family: Georgia;
text-align: center;
}
.navigation {
position: absolute;
left: 3%;
top: 143px;
width: 18% !important;
width: 19%;
min-height: 600px;
height: 600px;
height: auto !important;
overflow: auto;
padding: 5px;
background-color: #ffffff;
border: 1px solid #353535;
color: #353535;
font-size: 14px;
font-family: Georgia;
text-align: left;
}
.main {
position: absolute;
left: 22%;
left: 23% !important;
top: 143px;
width: 74%;
width: 73% !important;
min-height: 600px;
height: 600px;
height: auto !important;
overflow: auto;
padding: 5px;
background-color: #ffffff;
border: 1px solid #353535;
color: #353535;
font-size: 14px;
font-family: Georgia;
text-align: left;
}
.footer {
position: absolute;
left: 3%;
top: 755px;
top: 765px !important;
width: 93%;
padding-top: 10px;
padding-left: 5px;
padding-bottom: 10px;
padding-right: 5px;
background-color: #7ec209;
border: 1px solid #353535;
color: #353535;
font-size: 16px;
font-family: Georgia;
text-align: center;
}
a {
color: #4e4e4e;
font-family: Georgia;
text-decoration: underline;
}
a:hover {
color: #4e4e4e;
font-family: Georgia;
text-decoration: none;
}

Any help is MUCH appreciated. If you do not understand some parts of my question, just ask what I meant and I'll explain further.

[robin9000]

I read your hole question and after doing so I am not sure but I think the following page might help, if not sorry.

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

[magicyte]

Great! I think that that's exactly what I need. If it isn't, I'll let you know. Thanks!

[magicyte]

HOLD IT! Would there be any possible way to do this with the elements being ABSOLUTELY POSITIONED? If so, please let me know.

[Twey]

All hail pixel sizing! (http://s5.tinypic.com/n4uttt.jpg)

[magicyte]

Yeah- need to work on that... 600 x 800 or whatever... :(

[Twey]

1600×1200, with large fonts. Pixel sizing causes the layout to break if the user needs to resize the text.

[magicyte]

@Twey

What do you mean, and how should I approach this?

I didn't understand "all hail pixel sizing". Could you give me more details?

[Twey]

It was ironic. Remove the pixel sizes — use percentages (or ems for container-independent sizes like height).

[magicyte]

I use percentages for the width and position. I use pixel sizes for height. What units (or whatever) should I use for...

...width?
...height?
...position (if I should position them absolutely at all)?

Also, is it possible to center divs without centering text?
Thanks.

[Twey]

...width?Generally, percentages with a min-width in ems.

...height?ems.

...position (if I should position them absolutely at all)?You shouldn't.

Also, is it possible to center divs without centering text?Yes — in fact, there's no way to centre both at the same time (with a single rule).