Problems with vertically centering a DIV

Problems with vertically centering a DIV - Printable Version

-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: Problems with vertically centering a DIV (/showthread.php?tid=90801)

Problems with vertically centering a DIV by CookieRevised on 05-27-2009 at 04:53 AM

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">

</style>

RE: Problems with vertically centering a DIV by Adeptus on 05-27-2009 at 06:48 AM

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%.

RE: Problems with vertically centering a DIV by NanaFreak on 05-27-2009 at 06:52 AM

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

RE: RE: Problems with vertically centering a DIV by CookieRevised on 05-27-2009 at 08:27 AM

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.

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

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....

RE: Problems with vertically centering a DIV by NanaFreak on 05-27-2009 at 08:37 AM

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

RE: Problems with vertically centering a DIV by CookieRevised on 05-27-2009 at 08:55 AM

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

RE: Problems with vertically centering a DIV by NanaFreak on 05-27-2009 at 09:25 AM

its ok cookie