CODEWITHSUNDEEP
cssfooter
Nathan
Nathan

Reputation: 87

Trouble with footer

Hey I'm learning HTML and CSS and have had succes with footers before, but for some reason this particular project keeps giving me problems with the footer no matter what I try.

I have some floating elements, and have used a wrapper to put them in.

What I want is a Footer that sticks to the bottom of the page at all times. Regardless of content or scrolling behavior.

When I do this, for some reason the footer sticks to the top of the wrapper even though I positioned it outside of the wrapper element in the HTML coding.

#footerBottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 4em;
  background-color: black;

}
<div id="header">
	<title>The Title Of The Website</title>

</div>
<nav>
</nav>

<div id="wrapper">
	<div id="contentLeftOne">

	</div>

	<div id="contentLeftTwo">

	</div>

	<div id="contentLeftThree">

	</div>

	<aside id="sideTop">

	</aside>

	<aside id="sideMiddle">


	</aside>

	<aside id="sideBottom">

	</aside>

</div>

<div id="footerBottom">
	<p>Here Is A Footer But It Isn't Sticking To The Bottom</p>
</div>

When I position it inside the wrapper, it's positioned at the top of the wrapper element.

Am I overseeing something? I googled a bunch but nothing seems to solve it. Do I need to use jQuery? Is it the floating elements that's screwing things up?

Thanks in advance for all that try to help.

Upvotes: 2

Views: 63

Answers (2)

Marc Audet
Marc Audet

Reputation: 46825

I cleaned up your HTML a bit to help get you started.

For valid HTML, make sure that your li elements are children of a ul (or ol) element.

Also, <title> is not a valid HTML tag. However, title is a valid attribute for some HTML tags. The <title> tag is used for metadata as part of the document <head> section, for more details, see: http://www.w3.org/TR/html5/document-metadata.html#the-title-element;

Note that since you are using position: fixed for the #footerBottom, that element will be taken out of the content flow and positioned with respect to the viewport. #footerBottom could appear anywhere in your script and the it would get positioned in the position specified by your CSS rule.

#footerBottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4em;
  background-color: black;
  color: white;
}
#wrapper {
  margin-bottom: 4.5em; /* or else you can see it beneath the footer... */
}
#wrapper, nav {
  border: 1px dotted blue;
}
#wrapper div {
  min-height: 25px;
  background-color: beige;
  margin: 10px 100px 10px 0;
}
#wrapper aside {
  width: 50px;
  min-height: 25px;
  background-color: lightblue;
  margin: 10px 0;
}
<div id="header">
  <h3>The Title Of The Website</h3>
</div>
<nav>
  <ul>
  <li><a href="#">Page1</a></li>
  <li><a href="#">Page2</a></li>
  <li><a href="#">Page3</a></li>
  <li><a href="#">Page4</a></li>
  </ul>
</nav>

<div id="wrapper">
  <div id="contentLeftOne"></div>
  <div id="contentLeftTwo"></div>
  <div id="contentLeftThree"></div>
  <aside id="sideTop"></aside>
  <aside id="sideMiddle"></aside>
  <aside id="sideBottom"></aside>
</div>

<div id="footerBottom">
  <p>Here Is A Footer But It Isn't Sticking To The Bottom</p>
</div>

Upvotes: 1

Rob
Rob

Reputation: 15168

The normal flow of HTML is to start at the top and go to the bottom. Your footer is positioned at the bottom but the p element is only one line box high. So it starts at the top of your footer as it should. If you set the height of your footer to a smaller height than 4em, you'll see the difference. Or, for that matter, set the font size or line height to 4em and see what happens.

Upvotes: 1

Related Questions