Resmar Jay Resmar Jay - 1 month ago 14
CSS Question

How Can I Keep the Footer Below My Picture Gallery

I already figured out how to keep the footer at the bottom of the other pages of the website I am trying to develop. But I can't figure out how to do it on my page with a photo gallery. The footer stays in the middle of the page. :(

Here is my HTML code for that page:



html {
margin: 0;
padding: 0;
height: 100%;
}
body {
color: #FF6347;
font-family: 'Ceviche One', cursive;
font-size: 2em;
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
margin: 0;
padding: 0;
min-height: 100%;
position:relative;
}
#footer {
background-color: #E9967A;
color: black;
margin: 0;
padding: 0 30px;
height: 50px;
width: 100%;
position: absolute;
bottom:0;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
height: auto;
width: 45%;
margin: 2.5%;
background-color: #FFEBCD;
color: #FF6347;
}

<body>
<div id="wrapper">
<p class="sectionheader">Beautiful Places in Tyria</p>
<ul id="gallery">
<li><p class="captionheader">Garden of Dawn</p>
<a href="img/treehouse Garden of Dawn.jpg">
<img src="img/treehouse Garden of Dawn.jpg" alt="">
</a>
</li>
<li><p class="captionheader">The Planetarium</p>
<a href="img/treehouse The Planetarium.jpg">
<img src="img/treehouse The Planetarium.jpg" alt="">
</a>
</li>
<li><p class="captionheader">Wizard's Fief</p>
<a href="img/treehouse Wizard's Fief.jpg">
<img src="img/treehouse Wizard's Fief.jpg" alt="">
</a></li>
<li><p class="captionheader">Black Citadel Statues</p>
<a href="img/treehouse Black Citadel Statues.jpg">
<img src="img/treehouse Black Citadel Statues.jpg" alt="">
</a></li>
<li><p class="captionheader">Shrine of the Six</p>
<a href="img/treehouse Shrine of the Six.jpg">
<img src="img/treehouse Shrine of the Six.jpg" alt="">
</a></li>
</ul>
<div id="footer">
<a href="http://facebook.com/rejisama">
<img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon">
</a>
<a href="http://twitter.com/nogoodreji">
<img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon">
</a>
<p>&copy; 2016 All rights reserved.</p>
</div>
</div>
</body>




Answer

I found that if you make the ul#gallery have a property of display:inline-block; it will give the gallery a physical height (because at the moment my browser says the height is zero) and push the footer to the bottom.