How to align bottom of sidebar and main content elements to the top of footer using simple CSS properties?

I'm experimenting with a simple example in order to better understand the basics of CSS float, position, height, and margin properties.

As you can see in the image, I'm trying to find a simple way (without using CSS Grid or Flexbox) to automatically align the bottom border of both the Sidebar and the Main content divs to the top border of the Footer.

Automatically align bottom border of Sidebar and Main to top border of Footer

Is there a simple way to use height and/or margin properties with 'auto' or '0' values to do this? I don't want to specify a number of pixels or a % height for either the Sidebar or Main divs. I'd rather just "glue" the bottom border of each to the top border of the Footer.

Here is my CSS code:

* {
  box-sizing: border-box;
  background: #ccc;
  font-family: arial;
}

body {
  margin: 0;
  padding: 0;
}

h2 {
  padding: 0;
  margin: 0;
}

.navbar,
.sidebar,
.main,
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar {
  width: 100%;
  height: 70px;
  border: 10px solid green;
}

.sidebar {
  width: 20%;
  float: left;
  border: 10px solid red;

  /* Rather than specifying a specific height for .sidebar, I want to align
  the bottom border of the sidebar to the top border of the footer automatically.
  Is there a possible combination of height and/or margin-bottom
  that can accomplish this? (Note: without using CSS Grid or Flexbox) */

  height: 400px;
  margin-bottom: ;
}

.main {
  width: 80%;
  float: right;
  border: 10px solid blue;

  /* Same comment here as sidebar above. */

  height: 350px;
  margin-bottom: ;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 140px;
  border: 10px solid purple;
}

And here is my HTML code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Playground</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="navbar"><h2>Navbar</h2></div>
  <div class="sidebar"><h2>Sidebar</h2></div>
  <div class="main"><h2>Main</h2></div>
  <div class="footer"><h2>Footer</h2></div>
</body>
</html>

Again, I know I can do this easily with CSS Grid, but I'd rather learn more about the capabilities and limitations of the "height" and "margin" properties first.

Thanks!

UPDATE: See below, I was able to achieve the layout I want by using "position: fixed" and explicitly locating the bottom and left/right sides of the Sidebar and Main divs. I also created --navbar-height and --footer-height variables so I only need to type those values once.

However, rather than using "position: fixed", I would rather use "float" and some other way to automatically locate the bottom edge of the Sidebar and Main elements to the top of the Footer. With my current code structure, is there some way to use the --footer-height variable to locate that bottom edge of those elements?

Sidebar and Main divs located via position: fixed

:root {
  --navbar-height: 70px;
  --footer-height: 140px;
}

* {
  box-sizing: border-box;
  background: #ccc;
  font-family: arial;
}

body {
  margin: 0;
  padding: 0;
}

h2 {
  padding: 0;
  margin: 0;
}

.navbar,
.sidebar,
.main,
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar {
  border: 10px solid green;
  width: 100%;
  height: var(--navbar-height);
}

.sidebar {
  border: 10px solid red;
  width: 20%;
  /* float: left; */
  position: fixed;
  top: var(--navbar-height);
  bottom: var(--footer-height);
}

.main {
  border: 10px solid blue;
  width: 80%;
  /* float: right; */
  position: fixed;
  right: 0;
  top: var(--navbar-height);
  bottom: var(--footer-height);
}

.footer {
  border: 10px solid purple;
  width: 100%;
  position: fixed;
  bottom: 0;
  height: var(--footer-height);
}

1 answer

  • answered 2018-04-14 15:55 Sorena

    You can set position:fixed for sidebar and main divs as well.

    Then set bottom: for the main and sidebar to the height of your footer or more to have them aligned above the the footer:

    * {
      box-sizing: border-box;
      background: #ccc;
      font-family: arial;
    }
    
    body {
      margin: 0;
      padding: 0;
      height: 800px;
    }
    
    h2 {
      padding: 0;
      margin: 0;
    }
    
    .navbar,
    .sidebar,
    .main,
    .footer {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .navbar {
      width: 100%;
      height: 70px;
      border: 10px solid green;
    }
    
    .sidebar {
      position: fixed;
      bottom: 70px;
      left:0;
      width: 20%;
      float: left;
      border: 10px solid red;
      height: 50px;
      margin-bottom: ;
    }
    
    .main {
      position: fixed;
      bottom: 70px;
      right:0;
      width: 70%;
      float: right;
      border: 10px solid blue;
      height: 70px;
    }
    
    .footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 70px;
      border: 10px solid purple;
    }
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>CSS Playground</title>
      <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
      <div class="navbar"><h2>Navbar</h2></div>
      <div class="sidebar"><h2>Sidebar</h2></div>
      <div class="main"><h2>Main</h2></div>
      <div class="footer"><h2>Footer</h2></div>
    </body>
    
    </html>

    JsFiddle: JsFiddle