Forum Moderators: not2easy
Another problem.
I have a centered DIV.
It must be 100% height.
Also body margins must be 20 pixels.
If content text is higher than 100%. The content DIV must expand.
Body margin must stay 20px.
The code below is almost oke, but 2 problem occur:
- IE: bottom-margin of 20px is lost, when content is more than 100%
- Mozilla: Text overlaps DIV. The DIV wont expand!
Here the code:
Can anyone help me...is there another solution?
-----------------------------------------------
<!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>
<title>B2S</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
html,
body {
background:#505962 url(../img/bg/body.jpg) repeat-y center;
height:100%;
margin:0;
padding:0
}
#container {
background:#FFF url(../img/bg/container.gif) repeat-y right;
bottom:20px;
left:0;
margin:0 auto;
position:absolute;
right:0;
top:20px;
width:604px
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#container {
height:expression(document.body.clientHeight - 40 + "px");
left:expression(document.body.clientWidth / 2 - 302 + "px")
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
</div>
</body>
</html>
--------------------------------------------------------
Thanks!
So take the 100% height out of the body element and put it, instead, into the #container rule dec. Set your margins and padding in BODY to 0, then set margins and padding on #CONTAINER to whatever you want.
Next, lose the top:20 and bottom:20 in the #CONTAINER rule. If you want a 20px margin, use margin instead.
Try this set up:
body, html {
margin: 0;
padding:0;
border:0;
background: whatever;
}
#container {
width: 600px;
height: 100%;
margin: 20px auto;
}
Keep in mind, however, that the 100% height is probably not even necessary, unless this container is on a page with other <divs> that are doing other things. WHy? Because one <div> holding content, not inside another <div> or <table> will automatically take up 100% of the available space. In other words, 100% height = the total height of all content. So you should be able to get rid of the height altogether.
If your problem is that the body background image is being overlapped, it's probably because you've got "repeat-y" and "center" (and "right" in #CONTAINER) in the wrong place. CSS shorthand rule declarations are very specific and picky. It HAS to be...
background: color url(image) position repeat;
...in that order. As you have it now, it's probably only displaying the image one time, at the top of the page/container.
Hope it helps.
But if you do declare html,body {height:100%} the margins of 20px (#container) cause the page to scroll in both IE and Firefox.
Any other suggestions?
