PDA

Click to See Complete Forum and Search --> : Vertical Align problem

rediffusion
01-01-2009, 07:43 PM
Hi,

Could somebody help me with this simple task?

I want the red box to fill the whole page (ie 100% width & height) and the blue box to to be centered (horizontally & vertically)

http://www.adjectivenoun.co.uk/TEST-NEW.html

Here's my coding:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST NEW</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>

<body>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="867" align="center" valign="middle" bgcolor="#FF0000"><table width="1020" height="602" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#0000FF">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>


Please help me out. I've been banging my head against the wall all day.

thanks,
Rich ;)
kaurotu
01-03-2009, 04:54 PM
I checked the code, and it seems to be working. (basically)

The blue box is centered, but I have to scroll down to see the bottom. Is this the effect that you want? I noticed the height and width of the blue box is a constant set in the code. Do you want it to be more dynamic?

Although, if you want to use CSS (my recommendation), do a google search for "css vertical center". I'm sure plenty of results will show up.