Vertical Centering in CSS
Posted: Sat Jul 02, 2005 1:43 pm
me again
. 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:
and here's css:
i'm sure some of you could spot where the problem is, that would be greatly appreciated.
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>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;
}