I'm struggling terribly to figure out why my content overflows and my divs aren't playing nicely. (all sitting where they should be.) This is a link to what I've got currently. I'll keep trying things. But any help would appreciated.
With thanks, Sam.
#wrapper {
width: 100%;
height:auto;
background-image: url(images/shattered.png);
background-repeat: repeat;
margin: auto;
}
#header {
width: 95%;
height: 5%;
max-width: 1024px ;
max-height: 768px ;
background-color: rgba(102,204,255,50);
margin: 0.5% ;
border: 0.5% ridge rgb(204,255,204);
padding: 0.5%;
}
#menu {
width: 5%;
height: 80%;
max-width: 1024px ;
max-height: 768px ;
float: left;
background-color: rgba(102,204,255,50);
margin: 0.5% ;
border: 0.5% ridge rgb(204,255,204);
padding: 0.5%;
}
#sidebar {
width: 5% ;
height: 80%;
max-width: 1024px ;
max-height: 768px ;
float: right ;
background-color: rgba(102,204,255,50);
margin: 0.5% ;
border: 0.5% ridge rgb(204,255,204);
padding: 0.5%;
}
#content {
width: 80% ;
height: 80%;
max-width: 1024px ;
max-height: 768px ;
background-color: rgba(215, 239, 255,70);
margin: 0.5% ;
border: 0.5% ridge rgb(255, 232, 124);
padding: 0.5%;
}
#footer {
width: 95% ;
height: 5%;
max-width: 1024px ;
max-height: 768px ;
clear: both;
background-color: rgba(102,204,255,50);
margin: 0.5% ;
border: 0.5% ridge rgb(204,255,204);
padding: 0.5%;
}