What happened to the Messenger Plus! forums on msghelp.net?
Shoutbox » MsgHelp Archive » Skype & Technology » Tech Talk » Problems with vertically centering a DIV

Problems with vertically centering a DIV
Author: Message:
CookieRevised
Elite Member
*****

Avatar

Posts: 15519
Reputation: 173
– / Male / Flag
Joined: Jul 2003
Status: Away
O.P. Problems with vertically centering a DIV
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>


This post was edited on 05-27-2009 at 06:28 AM by CookieRevised.
.-= A 'frrrrrrrituurrr' for Wacky =-.
05-27-2009 04:53 AM
Profile PM Find Quote Report
« Next Oldest Return to Top Next Newest »

Messages In This Thread
Problems with vertically centering a DIV - by CookieRevised on 05-27-2009 at 04:53 AM
RE: Problems with vertically centering a DIV - by Adeptus on 05-27-2009 at 06:48 AM
RE: Problems with vertically centering a DIV - by NanaFreak on 05-27-2009 at 06:52 AM
RE: RE: Problems with vertically centering a DIV - by CookieRevised on 05-27-2009 at 08:27 AM
RE: Problems with vertically centering a DIV - by NanaFreak on 05-27-2009 at 08:37 AM
RE: Problems with vertically centering a DIV - by CookieRevised on 05-27-2009 at 08:55 AM
RE: Problems with vertically centering a DIV - by NanaFreak on 05-27-2009 at 09:25 AM


Threaded Mode | Linear Mode
View a Printable Version
Send this Thread to a Friend
Subscribe | Add to Favorites
Rate This Thread:

Forum Jump:

Forum Rules:
You cannot post new threads
You cannot post replies
You cannot post attachments
You can edit your posts
HTML is Off
myCode is On
Smilies are On
[img] Code is On