CSS for Main Content Area divs
From Previous Page
Page 3
CSS Part
<style>
article {
padding-top:0;
padding-bottom:30px;
background-color:#b0c4de;
}
#content {
background-color:#b0c4de;
box-sizing:border-box;
}
h3 {
margin:0;
color:white;
padding:20px 0 20px 0;
}
#box1 {
box-sizing:border-box;
float:left;
width:47%;
height:250px;
border:solid 5px black;
background-color:white;
color:black;
margin-left:2%;
margin-bottom:10px;
padding:5px;
border-radius:25px;
}
#box2 {
box-sizing:border-box;
float:right;
width:47%;
height:250px;
border:solid 5px black;
background-color:white;
color:black;
margin-right:2%;
margin-bottom:10px;
padding:5px;
border-radius:25px;
}
#box3 {
box-sizing:border-box;
clear:both;
width:96%;
height:300px;
border:solid 5px black;
background-color:white;
color:black;
margin-right:2%;
margin-left:2%;
margin-bottom:10px;
padding:5px;
}
#box4 {
box-sizing:border-box;
float:left;
width:32%;
height:200px;
border-top:solid 5px black;
border-right:solid 2px black;
border-bottom:solid 5px black;
border-left:solid 5px black;
background-color:white;
color:black;
margin-left:2%;
margin-bottom:10px;
padding:5px;
}
#box5 {
box-sizing:border-box;
float:left;
width:32%;
height:200px;
border-top:solid 5px black;
border-right:solid 2px black;
border-bottom:solid 5px black;
border-left:solid 2px black;
background-color:white;
color:black;
margin-bottom:10px;
padding:5px;
}
#box6 {
box-sizing:border-box;
float:left;
width:32%;
height:200px;
border-top:solid 5px black;
border-right:solid 5px black;
border-bottom:solid 5px black;
border-left:solid 2px black;
background-color:white;
color:black;
margin-right:2%;
margin-bottom:10px;
padding:5px;
}
#box7 {
box-sizing:border-box;
clear:left;
width:96%;
height:300px;
border:solid 5px black;
background-color:white;
color:black;
margin-left:2%;
margin-right:2%;
margin-bottom:10px;
padding:5px;
}
#box8 {
box-sizing:border-box;
width:96%;
height:300px;
border:solid 5px black;
background-color:white;
color:black;
margin-right:2%;
margin-left:2%;
margin-bottom:10px;
padding:5px;
}
#box9 {
box-sizing:border-box;
width:96%;
height:300px;
border:solid 5px black;
background-color:white;
color:black;
margin-right:2%;
margin-left:2%;
padding:5px;
}
@media screen and (max-width: 999px) {
h3 {
padding:20px 0 10px 0;
font-size:1.5rem;
border-radius:25px;
}
#box1 {
float:none;
width:100%;
margin-left:0;
border-radius:0;
}
#box2 {
float:none;
width:100%;
border-radius:0;
}
#box3 {
width:100%;
margin:0 0 10px 0;
}
#box4 {
float:none;
width:100%;
margin-left:0;
border:solid 5px black;
}
#box5 {
float:none;
width:100%;
border:solid 5px black;
}
#box6 {
float:none;
width:100%;
border:solid 5px black;
}
#box7 {
width:100%;
margin:0 0 10px 0;
}
#box8 {
width:100%;
margin:0 0 10px 0;
}
#box9 {
width:100%;
margin:0;
}
}
</style>
- This is all in the header and goes in between style tags.
- Boxes 1 and 2 need to be the same height. Boxes 4, 5 and 6 also need to be the same height. For all the boxes, you can make them any height you want. You can eliminate boxes if there are to many. Just remember that boxes 1 is floated left and box 2 is floated right and box 3 has a clear:both. Boxes 4, 5 and 6 are floated left and box 7 has a clear:left.
- #content : I made sure it had a white background and I needed to add 30px of padding at bottom.
- Box 1 is floated left and box 2 is floated right. Both box 1 and 2 are 47% wide. Box 1 has margin-left and box 2 has margin right. The property:values are all understandable. The only new thing is border-radius:25px; . That curves the borders on the corners.
- Box 3 has clear:both because we floated one left and the other right so use clear: both in that case. I didn't want the boxes right up against the edge.
- Boxes 3, 7, 8 and 9 are 96% wide. I added 2% margins on the left and right which seemed to center it good. I have 10px of margins on the bottom of all the boxes so they were not right against each other.
- You can change border size and color, height of the box. Add rounded corners or remove them. There is also css to put shadow on the rounded corners. You can change background color and font color.
- The mobile styling starts where it says @media screen and (max-width: 999px). I added float:none to all the boxes that were either floated right or left. I had to modify some of the borders and margins. Changed the widths to 100%. The longer you practice building pages, the better you will get at it.