Page 1 of 1

Vertical Centering in CSS

Posted: Sat Jul 02, 2005 1:43 pm
by Ree
me again :P. i may seem like posting a lot, but i got yet another important question for me. on w3c site, they have a very nice example on how the elements can be centered vertically inside a div. but following their logic, i am unable to make vertical centering possible.

here's the link to w3c example: http://www.w3.org/Style/Examples/007/center.html

here's my html:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1257">
<title>Administrative Interface</title>
<link rel=stylesheet type="text/css" href="style.css">
</head>
<body>
<?php include('../func/switch_page_admin.php'); ?>

<div id="content">
  <div id="menu"><?php include('menu.php'); ?></div>
  <div id="page"><?php SwitchPage(); ?></div>
</div>

</body>
</html>
and here's css:

Code: Select all

html, body
{
  height: 100%;
}

body
{
  font-family: verdana;
  background-color: #E6E6E6;
  margin: 0;
}

#content
{
  height: 80%;             //for some reason in Firefox it's not 80%, in IE it is
  display: table-cell;     //according to w3c example
  vertical-align: middle;  //this should make #menu and #page appear in the middle vertically (but doesn't)
}

#menu, #page
{
  height: 100%;
  background-color: #00CCFF;
}

#menu
{  
  width: 20%;
  float: left;
  text-align: left;
}

#page
{
  width: 60%;
  float: right;
  text-align: center;
}
i'm sure some of you could spot where the problem is, that would be greatly appreciated.

Posted: Sun Jul 03, 2005 3:37 pm
by Ree
if you do vertical centering the other way and it really works, please let me know. as i'm beginning to think using tables is the only really working and straight-forward way.

Posted: Sun Jul 03, 2005 5:02 pm
by neophyte
Are you trying to do a typical layout with header right and left sides and content in the center? If so check out:

http://glish.com/css/

There are patterns there for every webpage imaginable for css layout.

Hang in there, I'm new to css layout too. Don't forget them days when tables were daunting. :wink:

Posted: Sun Jul 03, 2005 5:25 pm
by Chris Corbyn
You need the block with the table-cell display style to be inside one that has a table display style.....

http://www.jakpsatweb.cz/css/priklady/v ... on-en.html

Posted: Tue Jul 05, 2005 9:00 am
by Ree
thanks, d11wtq, that helped me, but somehow partly only. now both divs are displayed lower, but still not in the vertical middle. i have corrected my html, and added a div 'container' and added "display: table" to it in css.

here's how my html looks like after the correction:

Code: Select all

<div id="container">
  <div id="content">
    <div id="menu"><?php include('menu.php'); ?></div>
    <div id="page"><?php SwitchPage(); ?></div>
  </div>
</div>
css:

Code: Select all

html, body
{
  height: 100%;
}
 
body
{
  font-family: verdana;
  background-color: #E6E6E6;
  margin: 0;
}

#container
{
  height: 80%;
  display: table;
}
 
#content
{
  display: table-cell;
  vertical-align: middle;
}
 
#menu, #page
{
  float: left;
  height: 80%; 
  background-color: #00CCFF;
  margin: 20px;
}
 
#menu
{  
  width: 20%;
  text-align: left;
  font-size: 0.8em;
}
 
#page
{
  width: 60%;
  text-align: center;
  font-size: 0.7em;
}
and this is what i see in firefox:
http://www.wsi-network.com/projects/ryt ... /admin.gif

there's some extra space below the blue divs, but i really can't find where firefox takes it from. another thing is that if i put 100% height to both blue divs they are not lowered at all (start from the top). i even tried adding 0 margin and padding everywhere but that didn't help. maybe you can spot the problem?

Posted: Tue Jul 05, 2005 9:29 am
by Ree
luckily i have found the solution. i jus needed to make body have "display: table". so actually, the extra div was not neccessary. :D

Posted: Tue Jul 05, 2005 9:54 am
by james_k
or give the container the table property.

a good site for CSS layouts and the various browser bugs --

Position is Everything