What could be causing the footer to not show up at the bottom of the page?

I've encountered an issue with my code where the footer appears to be stuck at the bottom of the h2_c div instead of the bottom of the .content div where it should be. I have tried using positioning but it hasn't resolved the problem.

Thank You.

.header {
  background: #a7a7a7;
  min-height: 700px;
  position: relative;
}
.content {
  width: 940px;
  margin: 70px auto 0 auto;
}
.h2_c {
  color: #333;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.one {
  float: left;
  width: 300px;
  height: 400px;
  background: green;
  position: relative;
}
.info {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.two {
  float: left;
  width: 300px;
  height: 400px;
  background: green;
  margin-left: 20px;
  position: relative;
}
.three {
  float: right;
  width: 300px;
  height: 400px;
  background: green;
  position: relative;
}
.h2 {
  color: #fff;
  font-size: 28px;
  padding: 20px 20px 10px 20px;
  margin: 0;
}
.p {
  color: #ccc;
  margin: 0;
  padding: 0px 20px 10px 20px;
  font-size: 16px;
}
.span {
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 3px 10px 3px 10px;
  font-size: 11px;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  background: blue;
  margin: 20px;
}
.footer {
  border-top: 4px solid orange;
}
<div class="header"></div>
<div class="content">
  <h2 class="h2_c">Content</h2>
  <div class="one">
    <div class="info">
      <span class="span">Text 1</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
  <div class="two">
    <div class="info">
      <span class="span">Text 2</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
  <div class="three">
    <div class="info">
      <span class="span">Text 3</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
</div>
<div class="footer"></div>

htmlcss

Answer №1

Your "really cool text" sections that are floated are overflowing outside of the .content section because floats do not affect the height of their container by default.

To fix this issue, add overflow: auto to the .content class to establish a new block formatting context as described in CSS specifications.

.header {
  background: #a7a7a7;
  min-height: 700px;
  position: relative;
}
.content {
  width: 940px;
  margin: 70px auto 0 auto;
  overflow: auto;
}
.h2_c {
  color: #333;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.one {
  float: left;
  width: 300px;
  height: 400px;
  background: green;
  position: relative;
}
.info {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.two {
  float: left;
  width: 300px;
  height: 400px;
  background: green;
  margin-left: 20px;
  position: relative;
}
.three {
  float: right;
  width: 300px;
  height: 400px;
  background: green;
  position: relative;
}
.h2 {
  color: #fff;
  font-size: 28px;
  padding: 20px 20px 10px 20px;
  margin: 0;
}
.p {
  color: #ccc;
  margin: 0;
  padding: 0px 20px 10px 20px;
  font-size: 16px;
}
.span {
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 3px 10px 3px 10px;
  font-size: 11px;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  background: blue;
  margin: 20px;
}
.footer {
  border-top: 4px solid orange;
}
<div class="header"></div>
<div class="content">
  <h2 class="h2_c">Content</h2>
  <div class="one">
    <div class="info">
      <span class="span">Text 1</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
  <div class="two">
    <div class="info">
      <span class="span">Text 2</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
  <div class="three">
    <div class="info">
      <span class="span">Text 3</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
</div>
<div class="footer"></div>

Answer №2

When you use the float property on an element, it removes that element from the normal flow of HTML. To fix issues with floating elements, you can add a line like this:

<div style="clear:both"></div>

By placing this right after your three floating div's, it will help keep things in order.

Another option is to use the CSS pseudoelement :after with the property clear: both, but I prefer the first method for better compatibility across older browsers.

Sometimes adding overflow:hidden can also solve the problem, but I personally don't like this approach as it may hide overflow content unintentionally.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Expanding <a> element to cover the entire <li> container

Take a look at this straightforward menu layout: <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> I'm looking to expand the <a> element so that it ...

htmlcssxhtml

Sending JSON data from the primary window to the secondary window in Electron - A step-by-step guide

I am currently working with a set of 3 files. index.html: ... <a href="#" onclick="fetch(function(data) {console.log(data); subWindow(data)})">subWindow</a> ... The fetch() function retrieves a callback in JSON format. subWindows.js: let m ...

javascripthtmlnode.jsjsonelectron

Using ajax to submit a form in CodeIgniter and displaying the returned data in a table view

When I submit a form on the view page, I want the form data to be saved in a database table and displayed without refreshing the page. Below is my view code: <div class="col-md-12"> <div class="row"> <div> <table class="table table-s ...

htmljsonajaxdatabasecodeigniter

The div element's width does not match the width of the textbox

I attempted to implement the following code in HTML. However, I am puzzled as to why the text box and div width are not the same size. Here is what I have experimented with. <style> .test { border:1px solid red;width:100px;height:30px;padding:3p ...

htmlcss

Could someone recommend a Python function that can encode output specifically for use in JavaScript environments?

Looking to securely encode output for JavaScript contexts in Python 3.6+? This means ensuring that any input string is properly encoded so that replacing VALUE with it will prevent all XSS attacks on the webpage, containing the input within the boundaries ...

pythonhtmlpython-3.xpython-3.6

How to attach an event listener to an input element using Angular

I am looking to add a listener to an input element that will be triggered every time the user changes the input values. The goal is to display the current values chosen by the user. Example HTML template: <div id="idDoseLabel1" class="da ...

javascripthtmlcssangulartypescript

Discover the method for creating URLs that are relative to the specific domain or server on which they are hosted

I need to adapt my menu bar to cater for different server environments: <a href="http://staging.subdomain.site.co.uk/search/page">Menu</a> The main source site is hosted on an external subdomain from an API service, and I want the URLs in my ...

javascripthtmlurlhyperlink

Having trouble loading the image source using JSON in Vue.js

var topArticle=new Vue({ el:'#toparticle', data:{topmostArticle:null}, created: function(){ fetch('topnews.json') .then(r=>r.json()) .then(res=>{this.topmostArticle=$.grep(res,functi ...

javascripthtmljsonvue.js

Utilizing AJAX and PHP to enhance Zend_Config_Ini

As I develop my own CMS, I encountered a challenging issue that I couldn't find a solution for on Google... My dilemma lies in creating an edit_settings.php file using AJAX and PHP to integrate my Zend_Config_Ini for parsing and writing purposes with ...

phphtmlajaxzend-framework

Utilizing MySql in HTML Buttons Using PHP

PHP $con=mysqli_connect("localhost","root","","mmogezgini"); $menuler = mysqli_query($con,"SELECT * FROM menuler"); while($menu = mysqli_fetch_array($menuler)) { echo "<button class=\"ust_link\" onClick=\"window.location.href ...

phphtmlmysql

How to Ensure an Absolutely Positioned Element Occupies the Full Width of its Container

My main content area has a sidebar positioned absolutely to the right side due to various reasons. However, I am facing an issue where if the main content area is shorter, the sidebar extends beyond the content. Do you know of any CSS technique that can h ...

htmlcsslayout

linking to a page that shows the user's chosen option from a dropdown menu

One of the challenges I encountered was creating a feature that allows users to share a specific selection from multiple dropdown lists on a page. Essentially, my goal was to enable users to send a link that would direct others to the same page with the ex ...

javascriptjqueryhtml

Ways to showcase a list in 3 columns on larger screens and 1 column on smaller screens

When viewing on a computer, my list appears like this: However, when I switch to a phone, only the first column is visible and the list does not continue in a single column format. I am utilizing Bootstrap for my layout, and here is a snippet of my code: ...

javascriptcsssizescreen

Creating expandable card components with React and CSS using accordion functionality

I am currently working on creating a card that will expand its blue footer when the "view details" link is clicked to show lorem text. However, I am encountering an issue where the blue bottom of the card does not expand along with the lorem text. You can ...

javascriptcssreactjsstyled-components

Displaying a loading spinner image as PHP script runs

Hey there! I've been experimenting with using a script to show a loading bar while my PHP code is running. I followed the instructions on this website, but even after following the exact steps, my loading bar still isn't showing up. Any suggestio ...

javascriptphpjquerycss

The specified selector is invalid or illegal in HTMLUnit

Attempting to mimic a login using htmlunit has presented me with an issue despite following examples. The console messages I have gathered are as follows: runtimeError: message=[An invalid or illegal selector was specified (selector: '*,:x' erro ...

javajavascriptcsshtmlunitweb-crawler

What could be causing the header of the datatable to be out of alignment with the rest of

I'm facing an issue with my datatable where the header is misaligned with the content. Can someone please assist me in adjusting the header and content so that they are parallel? It doesn't look right at the moment. <div style="margin-top:1 ...

javascriptjqueryhtmlcss

Tips for maintaining alignment of components within an Angular Material tab:

I am facing an issue with keeping items aligned properly. Initially, I had a form with two Angular Material lists placed side by side, each occupying 6 units and it looked good. However, when I tried to enclose these two lists within a material tab, they e ...

cssangularangular-material

What could be causing my CSS relative positioning to malfunction?

I am struggling to adjust the positioning of my divs using relative and absolute properties. Any advice on how to resolve this issue would be greatly appreciated. Thank you. Example Code: <div id="game"><img src="gta-game.jpg" height="100" width ...

csscss-position

jQuery Accordian malfunctioning for all elements except the first one in the list

Trying to implement an accordion feature that can be utilized across the entire website. The current logic seems to be partially functional... When I click on any of the accordions, it should open by adding a 'show' class, but this only works for ...

javascripthtmljquerycss