Forum Moderators: not2easy
example code:
#page_holder{width:100%; background:url(/images/some_image.jpg); background-repeat:repeat-x; margin:0px; padding:0px; }
#main_holder{width:990px; height:100%; display:table-cell; text-align:center; margin:0px auto; padding:0px; border-left:2px solid #D57939; border-right:2px solid #D57939; background-color:#FFFFFF; background-repeat:repeat;}
Notes:
#page_holder: will create a div 100% of user's screen with 1 background image
#main_holder: this is the actual holder of my content. It will hold many other divs and will hold them all aligned to the center of screen.
width: 100% auto; will center my div in firefox (while text-align center works for IE)
display:table-cell is for 100 height in firefox (while height 100% works for IE)
Each one of these, works in stand-alone mode.
When i combine them, all of my contect gets alligned to the left of page in firefox (appears correctly in IE).
Any advice?
Why don't you format the body instead of the "#page_holder" ?
AFAIK 100% height needs a parent with a height.
I think something like this works in FF3, safari and opera alike:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
background-color: red;
height: 100%;
}
#wrap {
width: 990px;
margin: 0 auto;
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div id="wrap">
<p>Hello world</p>
</div>
</body>
</html>
See also [webmasterworld.com...] , although I had to add the 100% height to the html in order for it to kick into gear.
Tip, as always, it's easier to start without looking at IE at all, and then add IE specifics to a conditional comment.
I can't seem to be able to align my main div to center of screen, while at the same time giving 100% height to it.
Several thoughts:
The problem with the left align in ff (and opera9 and winSafari) is
display:tabledisplay:tableheight:100%html, body {height;100%} If that doesn't help, or you really need
display:table
