I made a website designed with CSS containing div's. I have a footer, header and a middle background. At first sight, it works fine, everything is stretched 100% horizontal.
However, with a smaller resolution, when appearing a horizontal scrollbar, the repeating background does not stretch to the right.
So if you have the horizontal scrollbar and go to the right, you see these gaps in the repeating backgrounds.
In the middle of the page is also a vertically repeated background image. Where the grey column begins has to stay between "Advertenties" and "Portfolio". However here also, with a smaller resolution, the background goes to the left.
I tried min-width and width 100%. Not working. You can see a live example at http://www.johandaems.com/testcase/
HTML
Code: Select all
<body>
<div id="fauxcolumn">
<div id="page_column">
<div id="wrapper">
<div id="header">
<!-- Header content -->
<div id="top"> </div>
</div>
<div style="clear:both;"></div>
<div id="fix">
<div id="content80">
<!-- Main content -->
</div>
</div>
<div id="rightcolumn">
<!-- Right column -->
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div id="footerwrapper">
<div id="footer"> </div>
</div>
</body>Code: Select all
* {
margin : 0;
padding : 0;
}
html {
height: 100%;
}
body {
font : 76%/160% Tahoma, Verdana, Arial, sans-serif;
color : #181818;
text-align : center;
height: 100%;
padding: 0;
text-align: center;
background-color:#7b7b83;
}
#page {
background: #ffffff url(../images/header_bg.jpg) repeat-x;
min-width: 966px;
}
#page_column{
background: url(../images/header_bg.jpg) repeat-x;
}
#fauxcolumn{
background:url(../images/bg_faux.jpg) repeat-y 50% 0;
padding:0;
margin:0;
}
#wrapper {
position:relative;
margin: 0 auto;
text-align: left;
width: 966px;
text-align : left;
}
#fix {
clear: both;
float: left;
width: 100%;
}
#content80 {
min-height:400px;
margin: 0 260px 0 5px;
padding: 20px 0 0 0;
}
#rightcolumn {
float: right;
margin: 0 0 20px -870px;
padding: 20px 0 0 20px;
width: 240px;
}