css vertical problem

[3pinter]

Okay,

I've been toying with css for sometime and I'm still learning. I've looked at some tut. on the web and now I have a question:

I want a left colom divided into three pieces.
1. navigation
2. filler (variable)
3. copyright

I thought I do it on the same way one creates a liquid layout with three coloms
(div 1, widht 200px)
(div 2, margin-left 200px, margin-right 200px)
(div 3, width 200px)

So for the coloms I have this:



#navcontainer {
height:285px;
float:left;
clear:left;
}

#filler {
float:left;
clear:left;
margin-top: 285px;
margin-bottom: 55px;
}
#copyright {
height:55px;
float:left;
clear:left;
}

HTML:[code]<div id="navcontainer">
<p class="topimage1"></p>
<ul>
<li><a href="#">de meldingen</a></li>
<li><a href="#">maak een melding</a></li>
<li><a href="#">de co&ouml;rdinatoren</a></li>
<li><a href="#">publicaties</a></li>
</ul>
<p class="bottomimage"></p>
<h4></h4>
<p class="topimage2"></p>
<ul>
<li><a href="#">de algemene site</a></li>
<li><a href="#">de erven</a></li>
</ul>
<p class="bottomimage"></p>
</div><div id="filler"></div>
<div id="copyright">
test1
test2
test3
</div>

Don't mind the ul & il ... that's all working.

The id filler doesn't seems to work. because the copyright id isn't at the bottom of my page.

Does anybody has a solution for my problem.
(Critiques or better writing code is also welcome)

tnx.

:smirk:

[ditt0]

It's not easy to make a column in which the middle part is fluid while keeping the footer at the bottom of the page. And no, it doesn't work like the 3 columns layout. It's a different thing. You don't need floats as items position vertically by default..and definetely you don't need clearing. Here's an example.

[3pinter]

Wow, Okay let me get this clear:

- filler containes the navcontainer id. Filler is set to 100% height -55px margin top because you have a 55px margin bottom: so in fact you transport the whole filler id 55px upwards. Right

> What about the _height? I don't get that one...

- copyright is send to absolute but because the bottom isn't declared you do it by bottom:0. Right?

Well, I've learned a lot from your example and def. wouldn't have found that one out myself... :smirk:

Thanks! You probably see more questions over here ... css is a great tool!

[3pinter]

Shoot another question.

In the copyright id I also want to place my nedstat counter. But not visible though.

So I altered the bottom:0; to bottom:-30px; But that won't work because IE doesn't handle px the same as firefox does. an anoying thing .... How to handle this?

[ditt0]

_height is intepreted only by IE as height..when the content exceed that height, it will automatically enlarge, but it will not be less than that specific height. Min-height is interpreted only by ff/mozilla and does thee same thing.

Don't put bottom-30px. Applyto the netstat a class that will have in its css attributes "display:none".

[3pinter]

ditt0,

Working like a charm!!

:smirk: