Vertical Centering in CSS

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Vertical Centering in CSS

Post 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.
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post 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.
User avatar
neophyte
DevNet Resident
Posts: 1537
Joined: Tue Jan 20, 2004 4:58 pm
Location: Minnesota

Post 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:
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post 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?
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post 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
james_k
Forum Newbie
Posts: 7
Joined: Wed May 18, 2005 9:27 am
Location: Toronto

Post by james_k »

or give the container the table property.

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

Position is Everything
Post Reply