My footer is off-center

steelbydesign

02-13-2012, 03:14 PM

I'm a designer, that's new to freelance work, but I'm working on a page, and my footer is showing up as off-center, and I can't figure out why! Can anyone help me?

I'm new to these forums, so let me know if there's a better way for me to post this...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Revere Dance Studio - Cincinnati</title>
<META NAME="Description" CONTENT="Revere Dance Studio is committed to providing quality dance instruction, building confidence within our students and promoting dance as a healthy lifestyle. Through discipline and encouragement, our staff is dedicated to focusing on the development of the full artistic potential of each dancer.">
<META NAME="KEYWORDS" CONTENT="cincinnati, dance, studio, classes, kids, fun">
<link href='http://fonts.googleapis.com/css?family=Lato:900,300,700' rel='stylesheet' type='text/css'>
<link href="revere-styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
<header>
<section>
<div id="homeHeaderImage">
<h1><a href="index.html"><img src="images/logo.png" width="291" height="118" alt="Revere Dance Studio Logo" style="margin-left:9px; margin-top:22px"></a></h1>
</div>
</section>

<nav id="navBar">
<a href="revere_about.html" style="margin-right:10px;">About Us</a><strong>||</strong>
<a href="revere_classes.html" style="margin-right:10px; margin-left:10px;">Classes</a><strong>||</strong>
<a href="revere_calendar.html" style="margin-right:10px; margin-left:10px;">Calendar</a><strong>||</strong>
<a href="revere_competitionresults.html" style="margin-right:10px; margin-left:10px;">Competition Results</a><strong>||</strong>
<a href="revere_photos.html" style="margin-right:10px; margin-left:10px;">Photos</a><strong>||</strong>
<a href="revere_videos.html" style="margin-right:10px; margin-left:10px;">Videos</a><strong>||</strong>
<a href="revere_contactus.html" style="margin-right:10px; margin-left:10px;">Contact Us</a>
</nav>
</header>

<section id="contentContainer">
<section id="introParagraph">
<h2>Welcome to Revere Dance Studio</h2>
<p id="introParagraph">Revere Dance Studio is committed to providing quality dance instruction, building confidence within our students and promoting dance as a healthy lifestyle. Through discipline and encouragement, our staff is dedicated to focusing on the development of the full artistic potential of each dancer. We provide a positive environment for students to study dance while they create memories and build friendships through their experience at Revere Dance Studio.</p>
<br clear="all">
</section>
<section>

<section id="buckets">
<a href="revere_calendar.html" style="color:#FFFFFF; text-decoration:none;"><section id="calendarBucket">Take a look at the calendar to see <br>upcoming events!</section></a>
<a href="https://www.facebook.com/pages/Revere-Dance-Studio/262275620451561?ref=ts&sk=info" TARGET="_blank" style="color:#FFFFFF; text-decoration:none;"><section id="facebookBucket">Like us on facebook!</section></a>
<a href="revere_contactus.html" style="color:#FFFFFF; text-decoration:none;"><section id="contactBucket">Need to get in touch with us?</section></a>
</section>
<br clear="all">
</section>

<footer>
</footer>

</div>
</body>
</html>

Here's my CSS (attached as well)

@charset "UTF-8";
/* CSS Document */

/*CSS RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/* STYLING START*/

body{
background-image:url(images/bgPattern.jpg);
}

a:link {
font-family: 'Lato', sans-serif;
text-decoration:none;
color:#FFFFFF;
font-weight:700;
}
a:visited{
font-family: 'Lato', sans-serif;
text-decoration:none;
color:#FFFFFF;
font-weight:700;
}
a:hover {
font-family: 'Lato', sans-serif;
text-decoration:none;
color:#293987;
font-weight:700;
text-decoration:underline;
}
h2{
font-family: 'Lato', sans-serif;
text-decoration:none;
color:#293987;
font-weight:900;
font-size:24px;
}
#container{
height: 500px;
width: 1020px;
margin: 0px auto 0px auto;
background-color:#FFFFFF;
}

#homeHeaderImage{
width: 1020px;
height: 348px;
background-image:url(images/homeHeader.jpg)
}

#navBar{
background-image:url(images/navBG.jpg);
background-repeat:repeat-y;
height: 30px;;
width: 1020px;
color: #FFFFFF;
text-align:center;
padding-top: 15px;
}
#contentContainer{
background-image:url(images/contentBG.jpg);
background-repeat:repeat-y;
height: 300px;
padding: 25px 0px 0px 23px;
}
#introParagraph{
font-family: 'Lato', sans-serif;
font-weight:300;
font-size:16px;
width: 600px;
line-height: 1.5;
float:left;
}
#buckets{
float:right;
}
#calendarBucket{
background-image:url(images/calendarBucket.jpg);
width: 215px;
height: 40px;
margin-right: 20px;
margin-top: 25px;
font-family: 'Lato', sans-serif;
font-weight:300;
font-size:12px;
padding-top: 41px;
padding-left: 106px;
}
#facebookBucket{
background-image:url(images/facebookBucket.jpg);
width: 215px;
height: 40px;
margin-right: 20px;
font-family: 'Lato', sans-serif;
font-weight:300;
font-size:12px;
padding-top: 41px;
padding-left: 106px;
}
#contactBucket{
background-image:url(images/contactBucket.jpg);
width: 215px;
height: 40px;
margin-right: 20px;
font-family: 'Lato', sans-serif;
font-weight:300;
font-size:12px;
padding-top: 41px;
padding-left: 106px;
}
footer{
background-image:url(images/footerBG.jpg);
height: 61px;
width: 1020px;
}

Excavator

02-13-2012, 03:29 PM

Good morning steelbydesign,
Your box model is off.

See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

Your 1020px wide #container holds #contentContainer which, with it's 23px left padding, only has 997px of room in it.
Then you try to fit 1020px wide footer in there and it hangs over.

steelbydesign

02-13-2012, 04:28 PM

My footer isn't inside of the #contentContainer section though, so that padding shouldn't effect it right? It's inside the #container though.

Excavator

02-13-2012, 05:14 PM

My footer isn't inside of the #contentContainer section though, so that padding shouldn't effect it right? It's inside the #container though.

Your footer is contained inside #contentContainer and that 23px padding affects it. Maybe you don't close a section where you intended?

That is another example of your broken box model, #container is 500px high but you have at least 693px of header and #contentContainer, then footer hangs even further past that.

Instead of setting heights on your elements, you should just let them expand/contract to enclose their content naturally.

Look what some indenting and commenting does for keeping track of where elements need to be closed, highlighted in red below - <body>
<div id="container">
<header>
<section>
<div id="homeHeaderImage">
<h1><a href="index.html"><img src="images/logo.png" width="291" height="118" alt="Revere Dance Studio Logo" style="margin-left:9px; margin-top:22px"></a></h1>
</div>
</section>

<nav id="navBar">
<a href="revere_about.html" style="margin-right:10px;">About Us</a><strong>||</strong>
<a href="revere_classes.html" style="margin-right:10px; margin-left:10px;">Classes</a><strong>||</strong>
<a href="revere_calendar.html" style="margin-right:10px; margin-left:10px;">Calendar</a><strong>||</strong>
<a href="revere_competitionresults.html" style="margin-right:10px; margin-left:10px;">Competition Results</a><strong>||</strong>
<a href="revere_photos.html" style="margin-right:10px; margin-left:10px;">Photos</a><strong>||</strong>
<a href="revere_videos.html" style="margin-right:10px; margin-left:10px;">Videos</a><strong>||</strong>
<a href="revere_contactus.html" style="margin-right:10px; margin-left:10px;">Contact Us</a>
</nav>
</header>

<section id="contentContainer">
<section id="introParagraph">
<h2>Welcome to Revere Dance Studio</h2>
<p id="introParagraph">
Revere Dance Studio is committed to providing quality dance instruction, building confidence within our students
and promoting dance as a healthy lifestyle. Through discipline and encouragement, our staff is dedicated to
focusing on the development of the full artistic potential of each dancer. We provide a positive environment for
students to study dance while they create memories and build friendships through their experience at Revere
Dance Studio.
</p>
<br clear="all">
</section>
<section>

<section id="buckets">
<a href="revere_calendar.html" style="color:#FFFFFF; text-decoration:none;"><section id="calendarBucket">Take a look at the calendar to see <br>upcoming events!</section></a>
<a href="https://www.facebook.com/pages/Revere-Dance-Studio/262275620451561?ref=ts&sk=info" TARGET="_blank" style="color:#FFFFFF; text-decoration:none;"><section id="facebookBucket">Like us on facebook!</section></a>
<a href="revere_contactus.html" style="color:#FFFFFF; text-decoration:none;"><section id="contactBucket">Need to get in touch with us?</section></a>
</section>
<br clear="all">
</section>

<footer>
</footer>

</div>
</body>
</html>

You should also have a look at the links about validating in my signature line. That's a good way to find little errors in your code like this.

steelbydesign

02-13-2012, 05:19 PM

I'll go back and double check... but my intent is to have the #contentContainer include the #introParagraph as well as the #buckets.

Then the footer is outside of that.

EDIT: You were right, I had an extra <section> tag in there that wasn't closed. Thanks for the help!