Inside a table cell (which should be exactly 185x194 big, which is also the size of the background img) I have 3 DIVs:
html code:
<td style="background:url(header.png) no-repeat top left">
<div id="1" style="height:70px"></div>
<div id="2" style="margin:0px 20px 0px 5px; height:110px; width:169px; overflow:hidden">
<div class="NV_Titel">title</div>
<div class="NV_Tekst">some text</div>
<div class="NV_Meer">link</div>
</div>
<div id="3" style="height:5px"></div>
</td>
This works nice for everything, except: the <div> with id 2 should be vertically centered in the available space between <div1> (a header as you will) and <div3> (a footer as you will) according to the text wich is in the nested <div>'s with those classes asigned to it (this text is dynamic as it comes from a DB).
I have tried a lot of stuff, read pages and pages on the net, but for the love of God I can't get it to work and am really tired atm, which is probably why I can't get it to work because I'm missing something. Either it doesn't work in Mozilaa, then it screws up in MSIE, then the margins are wrong, then the overflow doesn't work, etc. etc.
I know I can do it very easly with tables, but that is exactly what I want to try to avoid.
note: also the left and right margin and the overflow setting are important.
And of course it needs to work in all browsers.
And the doctype is transitional (can't change that):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Can anyone help me?
PS:
html code:
<style type="text/css">
<!--
div.NV_Titel {
color: #0099CC;
padding-top: 0px;
font-weight: bold;
font-size: 14px;
text-align: center;
}
div.NV_Tekst {
padding-top: 8px;
font-size: 11px;
text-align: center;
}
div.NV_Meer {
padding-top: 8px;
font-size: 10px;
text-align: right;
}
-->
</style>