Hi Laura! :)
I went through your code and pinpointed the problem. You have the sidebar floated left, but not the main content, which is causing margin not to take. To be completely honest, I’m not sure why this is. I made some edits to both the HTML and CSS to help you out a bit. Note that this is just the result of a few quick edits, though there are some additions.
Most notably, I added a very succint CSS reset (really just gave *, html and body elements a margin and padding of zero), put the navigation in an unordered list for you, added title attributes to links and alt attributes to images (must keep accessibility in mind!), added closing tags where needed, and changed the footer text to a paragraph instead of a heading, as appropriate.
More importantly, of course, I fixed the margin issues for you. :P I commented the CSS so you can see what I did and why.
*, html, body {
margin:0;
padding:0;
}
body {
background-color:#ebebeb;
font-family: impact, sans-serif;
}
a {
color:#084c8d;
text-decoration:none;
}
img {
border-style: none;
}
h1 {
font-size:44px;
color:#ffffff;
margin: 15px 0 0 20px;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
font-size:26px;
color:#ffffff;
margin: 0 0 0 20px;
font-family:Arial, Helvetica, sans-serif;
}
h3 {
font-size:16px;
color:#000000;
margin: 0 0 0 20px;
font-family:Arial, Helvetica, sans-serif;
}
/*Basic paragraph styling for content text, unorder list styles including margins and spacing.*/
p {
font-size: 14px;
padding: 15px 0 0 0;
margin: 0 15px;
line-height: 1.2em;
}
ul {
font-size: 14px;
margin: 25px 15px 15px 40px;
}
li {
margin-top: 1em;
}
#container {
width:800px;
height:auto; /*Corrected typo here!*/
margin: 5px auto 5px auto;
background-color: #6682b5; /*Set background color for sidebar here instead of in sidebar styles, due to the way the sidebar functions. Basically this is behind all of the main content, but only visible beneath the sidebar.*/
}
#header {
width:800px;
height:60px;
background-color:#084c8d;
}
#header a {
color: #fff; /*So you can see the header link.*/
}
#vertinav {
width: 170px;
height: auto; /*No need for a set height anymore. This allows content to expand indefinitely without needing to re-set height of sidebar!*/
float: left;
}
/*Sidebar navigation list styles. Just declaring that we don’t want bullet points and a bit of a margin. Edit to your liking, of course.*/
#vertinav ul {
list-style: none;
margin: 10px 0 0 15px;
}
#content {
position: relative; /*Important for the float to work. Tells the browser to position this element RELATIVE to others in the markup.*/
float: left; /*Lets the content snug up to the sidebar all nice and neat.*/
background-color:#d5d5e5;
text-align: left;
width: 630px; /*Width should be width of container div MINUS width of sidebar. Any margins or padding on #content or #vertinav divs will affect width.*/
height: auto; /*Again, lets the content expand indefinitely without needing anything edited in the CSS to adjust height.*/
font-family:Arial, Helvetica, sans-serif;
}
#footer {
margin:0 0 0 0;
background: #b38471;
}
/*Clears the floated elements above, so no funky content overflow happens.*/
.clear {
clear: both;
}
/*Basically just the previous h4 styles.*/
#footer p {
font-size:14px;
color:#ffffff;
margin: 0;
font-family:Arial, Helvetica, sans-serif;
padding: 3px 0 3px 5px;
}
McAdoo Catholics admits students of any race, color, national or ethnic origin to all of the
rights, privileges, program and activities generally accorded or made available to its students.
The school does not discriminate on the basis of race, color, national or ethnic origin in the
administration of its education policies, its admission policy, or in any school-administered
program.
McAdoo Catholic offers students a strong academic program that prepares them for success in high
school; however, the primary purpose of the school is religious. Non-Catholic students may be
admitted to our school under the following conditions:
The parents/guardians agree to having their children attend religion classes and religious
functions that are offered as part of the school program.
Registration is traditionally held during Catholic Schools’ Week but students may be
registered by appointment at any time. The following are the requirements for registration at
McAdoo Catholic School:
- Children registering for Kindergarten must be 5 years old by October 15th following the
September of entrance to the school. All first-grade students must be 6 years old by October
15th following the September of entrance to the school. - State birth certificate, Baptismal certificate (if Catholic or Christian), and immunization
records must be presented at time of registration. - Parents of students transferring from another school will be requested to complete the
following forms: a transfer of records form, a request for bus service, and a request for the use
of textbooks provided by the State of Pennsylvania. - Students transferring from another school may be tested in reading and mathematics for placement.
Thank you for your interest in McAdoo Catholic. Please call us at (570) 929-1442 for additional information or to schedule a visit to the school.
Our school presently serves the following parishes/areas:
- All Saints Parish, McAdoo
- St. Nicholas Parish, Weatherly
- St. Richard Parish, Barnesville
- Hazleton Area
Hope this helps you out, Laura! I well remember my early days of CSS—figuring out floats and margins and positioning…it’ll get a lot easier as you go, though! You’ve made a good start, just in casting off tables. I know it can be a big leap going from table-based design to solely CSS-based design with divs, but it is certainly worth it in time saved later on down the road and, obviously, semantics and doing things "the right way."
If you have any further problems, or have any questions, feel free to ask. I’m sure someone around here can help. ;)
