Hey there! I'm fairly new to this whole web design thing, only a few months in.
Currently, I'm in the process of creating a website for my school.
However, I've hit a bit of a snag with different div containers holding various parts of my page.
First off is .BodyBackground, which contains my background image.
Within that, I have .allContent, serving as the main container for the entire webpage.
Inside .allContent, we have .LeftGroup, .MiddleGroup, and .RightGroup— three separate divs designed to house different styles of text/information.
At the bottom is the .footer div.
Now here's the issue: .LeftGroup and .RightGroup are overflowing beyond their intended boundaries.
The .MiddleGroup is also not aligned properly where it meets the .LeftGroup div.
I've spent hours attempting to troubleshoot this problem without any success. If someone could assist me, that would be greatly appreciated!
The actual site code isn't too complex; I've provided an explanation within the style sheet. Here's the CSS (style) code:
.BodyBackground {
background-image: url ('../Pictures/Background.jpg');
background-repeat: no-repeat;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 17%;
padding-right: 17%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position:center center;
z-index: 0;
overflow: auto;
height: 100%; }
.AllContent {
background-image: url('../Pictures/BackgroundFour.png');
background-repeat: no-repeat;
position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position:center center;
box-sizing: border-box;
width: auto;
height: auto;
padding: 20px;
border-style: solid;
border-color: orange;
}
.headerOne {
background-image: url('../Pictures/Background.jpg');
box-sizing: border-box;
width: 100%;
padding: 10px;
height: 200px;
box-shadow: 5px 5px 5px #333333;
}
.headerTwo {
font-family: Verdana, Arial, sans-serif;
box-sizing: border-box;
width: 375px;
height: 70px;
padding: 0px;
overflow: hidden;
white-space: nowrap;
text-indent: 3%;
font-weight: bold;
font-size: 18px;
color: white;
margin-bottom: 1%;
position: relative;
top: 37%;
}
.navOne {
box-sizing: border-box;
width: 100%;
padding: 2px;
height: 20px;
box-shadow: 3px 3px 3px #333333;
margin-top: 1%;
margin-bottom: 3%;
position: relative;
top: 35%;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
text-indent: 6%;
background-color: #3D75D5;
overflow: hidden;
white-space: nowrap;
}
a:hover {
color: Brown;
}
nav a {
color: white;
}
.LeftGroup {
box-sizing: border-box;
background-color: white;
width: 20%;
padding: 10px;
height: auto;
margin-top: 1%;
position: relative;
float: left;
}
.RightGroup }
box-sizing: border-box;
background-color: white;
width: 20%;
padding: 10px;
height: auto;
margin-top: 1%;
position: relative;
float: right;
}
.MiddleGroup {
box-sizing: border-box;
background-color: lightblue;
margin-top: 1%;
width: 60%;
padding: 10px;
height: auto;
position: relative;
left:20%;
float: center;
}
.Footer {
box-sizing: border-box;
background-color: gray;
margin-top: 0;
width: auto;
bottom: 0;
padding: 5px;
position: relative;
text-align: center;
color: white;
}