Hey everyone, I am working on this website for a class and everything seems to be working fine except when I reduce the size of the window to less than the width of the image in my “main” div, it leaves this blank space to the right of my header and footer images that are supposed to take up 100% of the window. Any idea how to fix this?
Website:
http://alexmel7.site88.net/Exercise 5 Part 1/index2.html
CSS:
body {
background-color: #000000;
margin: 0px;
}
#content {
width: 679px;
margin-left: -340px;
padding-left: 50%;
}
#header {
position: absolute;
top: 0px;
left: 0px;
background-image: url(images/headerbar.png);
width: 100%;
height: 54px;
}
#menu {
position: relative;
background-image: url(images/menubar.png);
width: 209px;
height: 277px;
padding-left: 25px;
margin-left: 430px;
background-repeat: no-repeat;
}
#main {
background-image: url(images/mainimage.png);
width: 679px;
height: 255px;
background-repeat: no-repeat;
}
.mainp {
position: relative;
top: -225px;
left: 60px;
color: #ffffff;
font-family: "Myriad Pro", "Trebuchet MS", Helvetica, sans-serif;
font-size: 37px;
line-height: 43px;
}
#footer {
background-image: url(images/footerbar.gif);
width: 100%;
height: 154px;
}