I'm attempting to create a sticky footer with flexbox. I know there are other methods, and do feel free to give me recommendations for better methods. I've used other methods (negative margins, etc.) and they just don't work like they need to. I also don't really care about having it work with legacy browsers, seeing as its too small of a demographic for me to care about with the type of site I'll be running.
URL: https://area51.ulmc.net/theurbexfederation/locations/industrial/technicalcenter/
The footer should be 100% width, but after adding flexbox, it isn't. If I set the position to absolute on the footer, the width is correct, but then it travels to the top of the page. That isn't what I want.
I need to make it so that the footer is 100% width and sticks to the bottom of the page, while also having a universal margin between the content and footer.
Please keep in mind that the page above is a temporary URL.
Remove margin: auto from #footer. An auto margin on a flex child has a neat effect, but not what you want to use here. Here's a good article on it. https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6
#footer {
margin: 0!important;
}<base href="https://area51.ulmc.net/theurbexfederation/locations/industrial/technicalcenter/">
<head>
<title>The Urbex Federation | Technical Center</title>
<link rel="stylesheet" type="text/css" href="../../../assets/css/styles.css">
<link rel="stylesheet" type="text/css" href="../../../assets/css/responsive.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700">
<link rel='shortcut icon' type='image/x-icon' href='../../../assets/img/favicon.ico'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="../../../assets/js/galleria/galleria-1.5.5.min.js"></script>
<script>
Galleria.loadTheme('../../../assets/js/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria', {
transition: 'fade',
imageCrop: true
});
</script></head>
<body>
<div class="container">
<div class="content">
<div class="galleria">
<img src="img/1.jpg" data-description="Shipping/receiving area behind GSI Lumonics">
<img src="img/2.jpg">
<img src="img/3.jpg" data-description="Vandals had broken a few of the windows. It had rained pretty hard, letting in a ton of water">
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/6.jpg">
<img src="img/7.jpg">
<img src="img/8.jpg">
<img src="img/9.jpg" data-description="Power room. Most of the equipment had been ripped out.">
<img src="img/10.jpg" data-description="Main floor area for GSI. Hard to know if this was a showroom or office area">
<img src="img/11.jpg">
<img src="img/12.jpg">
<img src="img/13.jpg">
<img src="img/14.jpg">
<img src="img/15.jpg">
<img src="img/16.jpg">
<img src="img/17.jpg">
<img src="img/18.jpg" data-description="GSI lobby area">
<img src="img/19.jpg">
<img src="img/20.jpg" data-description="The only other standing building. Appeared to be a testing facility for Magna">
<img src="img/21.jpg">
<img src="img/22.jpg">
<img src="img/23.jpg">
<img src="img/24.jpg">
<img src="img/25.jpg">
<img src="img/26.jpg">
<img src="img/27.jpg">
<img src="img/28.jpg" data-description="The whole office looked like it had been untouched for a long time. Everything was coated in a thick layer of dust">
<img src="img/29.jpg">
<img src="img/30.jpg">
<img src="img/31.jpg">
<img src="img/32.jpg">
<img src="img/33.jpg">
<img src="img/34.jpg" data-description="Discarded testing equipment along with a fax machine">
<img src="img/35.jpg">
<img src="img/36.jpg" data-description="A hole in the wall led into another unit for an energy company">
<img src="img/37.jpg">
<img src="img/38.jpg">
<img src="img/39.jpg">
<img src="img/40.jpg">
<img src="img/41.jpg">
<img src="img/42.jpg" data-description="An empty office area for the energy company. Lots of office furniture just left behind">
<img src="img/43.jpg">
<img src="img/44.jpg">
<img src="img/45.jpg">
<img src="img/46.jpg">
<img src="img/47.jpg">
<img src="img/48.jpg">
<img src="img/49.jpg">
<img src="img/50.jpg" data-description="Magna offices. This area appeared to have been used much more recently than the other section of the office">
<img src="img/51.jpg">
<img src="img/52.jpg">
<img src="img/53.jpg">
<img src="img/54.jpg">
<img src="img/55.jpg" data-description="DMARC room for the phone, security, and internet systems">
<img src="img/56.jpg" data-description="The security system was still running off its backup battery, but the service had been cut off. A loud warning alarm echoed throughout the building during this exploration">
<img src="img/57.jpg">
<img src="img/58.jpg">
<img src="img/59.jpg" data-description="The complex is located right next to a Costco. It was unnerving being so close to activity">
<img src="img/60.jpg" data-description="Receiving area for an autobody manufacturing company behind Magna">
<img src="img/61.jpg" data-description="Company documents were carelessly discarded">
<img src="img/62.jpg">
<img src="img/63.jpg">
<img src="img/64.jpg">
<img src="img/65.jpg">
<img src="img/66.jpg" data-description="Second building, home to the testing area for Magna">
<img src="img/67.jpg">
<img src="img/68.jpg">
<img src="img/69.jpg">
<img src="img/70.jpg" data-description="Partially demolished in preparation for redevelopment">
<img src="img/71.jpg">
<img src="img/72.jpg" data-description="Lots of random items in this building">
<img src="img/73.jpg">
<img src="img/74.jpg" data-description="A gym may have occupied the vacant Magna building for a short time, based on many of the items left behind">
<img src="img/75.jpg" data-description="Lockers with an unusual choice of material">
<img src="img/76.jpg">
<img src="img/77.jpg">
<img src="img/78.jpg" data-description="Office area">
<img src="img/79.jpg" data-description="Homeless people were/are camping in the empty offices">
<img src="img/80.jpg">
<img src="img/81.jpg">
<img src="img/82.jpg">
<img src="img/83.jpg">
<img src="img/84.jpg">
<img src="img/85.jpg">
<img src="img/86.jpg">
<img src="img/87.jpg">
<img src="img/88.jpg">
<img src="img/89.jpg">
</div>
<h1>Technical Center</h1>
<p>Opening in the early 1980s, this technical center and office complex was home primarily to
automotive testing, vision and laser manufacturing, as well as many other businesses in other
industries. The complex was comprised of 3 separate buildings, split into many different units.</p>
<br />
<p>The center remained at almost max occupancy until the mid-2000s, when companies began moving out
due to outgrowing the size of the facility. The eventual recession didn't help at all, and the
center continued to lose tenants. The nail in the coffin for the center was when the largest tenant,
Magna Automotive, moved to another facility. After this, a few smaller businesses occupied the facilities,
but the complex was still mostly empty. In 2013, the last tenant moved to a different facility, putting
the complex at 100% vacancy.</p>
<br />
<p>Shortly after, the developer of the site announced plans for a new marketplace and shopping center that would
make use of the existing structures. As part of this plan, one building and a quarter of another were torn
down. No new development has happened at the site since. Electricity and other services were cutoff shortly
before the partial demolition, and the interiors of the remaining buildings are gradually decaying as a result.
The center will hopefully see a brighter future, but for now, it remains vacant and exposed to the elements.</p>
</div>
</div>
<div id="footer">
<div id="footer-logo">
<img src="../../../assets/img/logo-whitebg.png">
</div>
<div id="copyright-text">
<p>Copyright © 2017 The Urbex Federation. All Rights Reserved.</p>
</div>
</div>