Reputation: 483
I'm working on my website that I need to be screenfilling in height. It exists of header-banner-content within a container.
The container itself is within another div (shadowbox) who is a bit wider because there is a fade out/shadow-effect. Therefore shadowbox is 1150px width and container only 1024px.
Maybe it is a better way to suppress the inner div and work width a left and right padding but I find it better to work without the padding.
This is my fiddle:
http://jsfiddle.net/Bartimi/REpTA/
<div id="shadowbox">
<div id="container">
<div id="header">
MENU
</div>
<div id="banner">
BANNER
</div>
<div id="content">
<div id="left">
content left <br /><br />
</div>
<div id="right">
content right
</div>
<div id="clear"></div>
</div>
</div>
</div>
How can I make sure the #shadowbox-background goes to the bottom?
CSS:
* {
margin: 0 auto;
padding: 0;
border: 0;
}
body {
background-image: url('http://atrox.no-ip.org:8082/HIJW/images/bg.png');
background-repeat: repeat;
}
#shadowbox {
width: 1150px;
min-height: 100%;
background-image: url('http://atrox.no-ip.org:8082/HIJW/images/shadowbox.png');
background-repeat: repeat-y;
}
#container {
width: 1024px;
}
#header {
height: 100px;
background-color: red;
}
#banner {
top: 100px;
min-width: 1200px;
height: 150px;
margin-left: -100%;
margin-right: -100%;
background-color: blue;
}
#content {
position: relative;
width: 1000px;
padding: 0;
margin-top: 20px;
}
#left {
float: left;
width: 625px;
background-color: green;
}
#right {
float: right;
width: 350px;
background-color: green;
}
#clear {
clear: both;
}
Upvotes: 1
Views: 1184
Reputation: 1781
Remove min-height:100%
from #shadowbox
and add this CSS :
html, body, #shadowbox {
height:100%;
}
Check this JSFiddle
Upvotes: 2