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
Adeptus
Senior Member
****


Posts: 732
Reputation: 40
Joined: Oct 2005
RE: Problems with vertically centering a DIV
This is where CSS fails and tables, as allergic to their usage as you might be, are a whole lot simpler.

I am not even closely following what you are trying to do, but if you are going to vertically center anything, your HTML and BODY both need to be height: 100%.
05-27-2009 06:48 AM
Profile E-Mail PM Find Quote Report
NanaFreak
Scripting Contest Winner
*****


Posts: 1476
Reputation: 53
32 / Male / Flag
Joined: Jul 2006
RE: Problems with vertically centering a DIV
quite sure this is what you want:

code:
CODE REMOVED! IT DIDNT WORK... LOOK BELOW!

:) works with same style and doctype

also i know it is making the divs fake being a table, its what you used in your dodgy hax version, this is just a whole heap neater than that =p

This post was edited on 05-27-2009 at 08:41 AM by NanaFreak.
05-27-2009 06:52 AM
Profile PM Find Quote Report
CookieRevised
Elite Member
*****

Avatar

Posts: 15519
Reputation: 173
– / Male / Flag
Joined: Jul 2003
Status: Away
O.P. RE: RE: Problems with vertically centering a DIV
quote:
Originally posted by Adeptus
This is where CSS fails and tables, as allergic to their usage as you might be, are a whole lot simpler.
On the contrary, I'm more allergic to this whole css ordeal than tables. :p But I wanted to 'simplify' the used tables a bit because the original creator used a _hell_ of a lot nested tables (that is, the program he used, Dreamwaver, has put them there). Guess I came to a point where it can't be 'simplified' anymore...

quote:
Originally posted by Adeptus
I am not even closely following what you are trying to do, but if you are going to vertically center anything, your HTML and BODY both need to be height: 100%.
I'm not vertically centering stuff on a page. I want to vertically center text (other divs) inside a table cell of which the width and height is known, and taking advantage of the margin/padding and overflow attributes (which was otherwise done with a lot more table cells and stuff).

quote:
Originally posted by NanaFreak
quite sure this is what you want:

Code snipped

:) works with same style and doctype

also i know it is making the divs fake being a table, its what you used in your dodgy hax version, this is just a whole heap neater than that =p
Ah, yeah I got the 'hax' version from a website. Your version seems a lot better, tbh, it looks too good to be correct :p
I'll test it tonight when I get home....
thanks

EDIT: tested it at work: doesn't work (besides that there was a </div> too much). The output is the same as my first code in this thread; it doesn't vertically align de three texts....

This post was edited on 05-27-2009 at 08:50 AM by CookieRevised.
.-= A 'frrrrrrrituurrr' for Wacky =-.
05-27-2009 08:27 AM
Profile PM Find Quote Report
NanaFreak
Scripting Contest Winner
*****


Posts: 1476
Reputation: 53
32 / Male / Flag
Joined: Jul 2006
RE: Problems with vertically centering a DIV
ok... for some reason it doesnt want to work now!

EDIT:
ok sorry, now this code works...

HTML code:
<table height="194px" width="185px" cellpadding="0" cellspacing="0">
<tr>
<td style="background:url(header.png) no-repeat top left">
    <div id="1" style="height:70px"></div>
    <div style="display:table;padding-left:5px;cellpadding:0;cellspacing:0;">
    <div id="2" style="margin:0px 20px 0px 5px; height:110px;  width:169px;display: table-cell; vertical-align: middle;padding:0">
        <div style="max-height:110px; overflow:hidden;">
        <div class="NV_Titel">title</div>
        <div class="NV_Tekst">some text</div>
        <div class="NV_Meer">link</div>
        </div>
    </div>
    </div>
    </div>
    <div id="3" style="height:5px"></div>
</td>
</tr>
</table>


I cant believe that cookie required help... and that I was the one to give it to him :D

This post was edited on 05-27-2009 at 08:44 AM by NanaFreak.
05-27-2009 08:37 AM
Profile PM Find Quote Report
CookieRevised
Elite Member
*****

Avatar

Posts: 15519
Reputation: 173
– / Male / Flag
Joined: Jul 2003
Status: Away
O.P. RE: Problems with vertically centering a DIV
Still doesn't work 100%

It works in Mozilla, but not in MSIE...
(ps: and there is still a </div> too much)

:'(

EDIT... hang on... omg, I think I got it... going to test some more... actually dead simple:

HTML code:
<td style="background:url(header.png) no-repeat top left; height:185px">
    <div id="1" style="height:70px"></div>
    <div id="2" style="margin-left:5px; width:169px; max-height:110px; overflow:hidden">
        <div class="NV_Titel">titletitletitletitletitletitletitletitletitletitletitletitle</div>
        <div class="NV_Tekst">some text some text some text some text some text some text some text </div>
        <div class="NV_Meer"><a href="">link</a></div>
    </div>
</td>


The key was the height in the <td> style (doh!) and max-height in the <div>...
Thanks NanaFreak, without you I would never have guessed it or kept on trying, so :bow:

<div id="3" style="height:5px"></div> wasn't even needed (was only a placeholder for some empty space anyways).

now time to sleep... at work :D

This post was edited on 05-27-2009 at 09:45 AM by CookieRevised.
.-= A 'frrrrrrrituurrr' for Wacky =-.
05-27-2009 08:55 AM
Profile PM Find Quote Report
NanaFreak
Scripting Contest Winner
*****


Posts: 1476
Reputation: 53
32 / Male / Flag
Joined: Jul 2006
RE: Problems with vertically centering a DIV
its ok cookie
05-27-2009 09:25 AM
Profile PM Find Quote Report
« Next Oldest Return to Top Next Newest »


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