title: How to align bottom of sidebar and main content elements to the top of footer using simple CSS properties?
body: <p>I'm experimenting with a simple example in order to better understand the basics of CSS float, position, height, and margin properties.</p>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/OS348.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OS348.png" alt="Automatically align bottom border of Sidebar and Main to top border of Footer"></a></p>
  
  <p>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.</p>
  
  <p>Here is my CSS code:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>And here is my HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;CSS Playground&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="navbar"&gt;&lt;h2&gt;Navbar&lt;/h2&gt;&lt;/div&gt;
    &lt;div class="sidebar"&gt;&lt;h2&gt;Sidebar&lt;/h2&gt;&lt;/div&gt;
    &lt;div class="main"&gt;&lt;h2&gt;Main&lt;/h2&gt;&lt;/div&gt;
    &lt;div class="footer"&gt;&lt;h2&gt;Footer&lt;/h2&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks!</p>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p><a href="https://i.stack.imgur.com/0AjcH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0AjcH.png" alt="Sidebar and Main divs located via position: fixed"></a></p>
  
  <pre><code>: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);
  }
  </code></pre>