1

This is my fiddle of the issue: https://jsfiddle.net/oa2b4cr9/

#nav{
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
}

#nav img{
    padding-bottom: 10px;
}

#pagecontent{
    border-left: 10px;
    max-width: 565px;
    min-width: 565px;
    float: right;
    padding-top: 10px;
    display: block;
}

I'd like the two bars to fill the gap from the top to the bottom of the page. I've researched for the last couple of hours and it's driving me a bit mad! I've tried: Adding display: table to the relevant elements Setting the min/max/height for both of the columns to 100% and that just pushes the container through the footer. Adding clear: both under both of the columns Setting the overflow to hidden Setting position to relative for the footer rather than absolute.

If anyone can help I would greatly appreciate it.

iamBen
  • 21
  • 3
  • Which two bars? Nav and PageConent? – N-ate Jan 04 '18 at 20:03
  • to have 2 column similar height: look at the faux columns method https://alistapart.com/article/fauxcolumns (almost as old as the float) when using float, else drop float and use display : table (1998...2004 when firefox showed up...or later when ie8 showed up) , flex (a couple of years) or grid( last year) depending on how old is the browsers you want to support. – G-Cyrillus Jan 04 '18 at 20:13
  • possible guidance: https://stackoverflow.com/q/48082358/3597276 – Michael Benjamin Jan 04 '18 at 20:14
  • @N-ate yes, sorry for not being clear. I was having trouble with the formatting. – iamBen Jan 04 '18 at 20:20

2 Answers2

0

Declare a height property on the containing element #content, e.g: 

#content{
  /* additional */
    height: 100%;
}

Then declare a height property on the nested #nav element, e.g:

#nav{
  /* additional */
  height: 100%;
}

Code Snippet Demonstration:

body,
html {
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-family: "Arial";
  font-size: 12px;
  height: 100%
}

body {
  background-color: #E2EEDA;
}

#container {
  height: 100%;
  width: 100%;
}

#topbar {
  height: 100px;
  background-color: #CBCADA;
  border-bottom: 2px solid black;
}

#header {
  max-width: 775px;
  min-width: 775px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: #CBCADA;
}

#content {
  max-width: 775px;
  min-width: 775px;
  margin-left: auto;
  margin-right: auto;
  background-color: #E2EEDA;
  padding: 0px;
  /* additional */
  height: 100%;
}

#nav {
  max-width: 200px;
  min-width: 200px;
  float: left;
  background-color: #CBDDE6;
  border-right: 1px solid black;
  padding-top: 15px;
  /* additional */
  height: 100%;
  padding-bottom: 20px;
}

#nav img {
  padding-bottom: 10px;
}

#pagecontent {
  border-left: 10px;
  max-width: 565px;
  min-width: 565px;
  float: right;
  padding-top: 10px;
  display: block;
  /* additional */
  padding-bottom: 50px;
  /* offset footer height */
}

#footerbar {
  height: 50px;
  width: 100%;
  background-color: #CBCADA;
  position: fixed;
  /* updated */
  bottom: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

#footercontent {
  max-width: 775px;
  min-width: 775px;
  margin-left: auto;
  margin-right: auto;
  background-color: #CBCADA;
  padding: 0px;
  text-align: center;
}

h1 {
  font-size: 25px;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <div id="container">
    <div id="topbar">
      <div id="header">
        <img src="http://via.placeholder.com/370x100">
        <img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
      </div>
    </div>
    <div id="content">
      <div id="nav">
        <p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
      </div>
      <div id="pagecontent">
        <h1>Lorem Ipsum</h1>
        <img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
          commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
          et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
          euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
          urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
          Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
          Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
          rhoncus, tempus eu nibh.</p>

        <ul>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
        </ul>
        <p>
          Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>

      </div>

    </div>
    <div id="footerbar" ">
    <div id="footercontent ">
     <p>Sed sagittis ac ex sed facilisis.</p>
    </div>
   </div>
  </div>
 </body>
</html>

Updated JSFiddle

In addition:

  1. The #footerbar element has been set to position: fixed
  2. padding-bottom has been declared on the #pagecontent element to account for the footer height taken out of the normal document flow.

Alternatively:

1. flex-box alignment (check browser compatibility):

body,
html {
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-family: "Arial";
  font-size: 12px;
  height: 100%
}

* {
  box-sizing: border-box;
}

body {
  background-color: #E2EEDA;
}

#container {
  height: 100%;
  width: 100%;
}

#topbar {
  height: 100px;
  background-color: #CBCADA;
  border-bottom: 2px solid black;
}

#header {
  max-width: 775px;
  min-width: 775px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: #CBCADA;
}

#content {
  max-width: 775px;
  min-width: 775px;
  margin-left: auto;
  margin-right: auto;
  background-color: #E2EEDA;
  padding: 0px;
  /* additional */
  display: flex;
}

#nav {
  max-width: 200px;
  min-width: 200px;
  float: left;
  background-color: #CBDDE6;
  border-right: 1px solid black;
  padding-top: 15px;
}

#nav img {
  padding-bottom: 10px;
}

#pagecontent {
  border-left: 10px;
  max-width: 565px;
  min-width: 565px;
  float: right;
  padding-top: 10px;
  display: block;
  /* additional */
  padding-bottom: 50px; /* offset footer height */
  padding-left: 15px;
}

#footerbar {
  height: 50px;
  width: 100%;
  background-color: #CBCADA;
  position: fixed;
  /* updated */
  bottom: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

#footercontent {
  max-width: 775px;
  min-width: 775px;
  margin-left: auto;
  margin-right: auto;
  background-color: #CBCADA;
  padding: 0px;
  text-align: center;
}

h1 {
  font-size: 25px;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <div id="container">
    <div id="topbar">
      <div id="header">
        <img src="http://via.placeholder.com/370x100">
        <img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
      </div>
    </div>
    <div id="content">
      <div id="nav">
        <p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
      </div>
      <div id="pagecontent">
        <h1>Lorem Ipsum</h1>
        <img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
          commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
          et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
          euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
          urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
          Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
          Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
          rhoncus, tempus eu nibh.</p>

        <ul>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
        </ul>
        <p>
          Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>

      </div>

    </div>
    <div id="footerbar" ">
    <div id="footercontent ">
     <p>Sed sagittis ac ex sed facilisis.</p>
    </div>
   </div>
  </div>
 </body>
</html>

2. absolute positioning:

body,
html {
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-family: "Arial";
  font-size: 12px;
  height: 100%
}

* {
  box-sizing: border-box;
}

body {
  background-color: #E2EEDA;
}

#container {
  height: 100%;
  width: 100%;
}

#topbar {
  height: 100px;
  background-color: #CBCADA;
  border-bottom: 2px solid black;
}

#header {
  max-width: 775px;
  min-width: 775px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: #CBCADA;
}

#content {
  max-width: 775px;
  min-width: 775px;
  margin-left: auto;
  margin-right: auto;
  background-color: #E2EEDA;
  padding: 0px;
  /* additional */
  position: relative;
}

#nav {
  max-width: 200px;
  min-width: 200px;
  float: left;
  background-color: #CBDDE6;
  border-right: 1px solid black;
  padding-top: 15px;
  /* additional */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

#nav img {
  padding-bottom: 10px;
}

#pagecontent {
  border-left: 10px;
  max-width: 565px;
  min-width: 565px;
  padding-top: 10px;
  display: block;
  /* additional */
  padding-bottom: 50px; /* offset footer height */    
  margin-left: 200px; /* offset sidebar nav width */
  padding-left: 20px;
}

#footerbar {
  height: 50px;
  width: 100%;
  background-color: #CBCADA;
  position: fixed;
  /* updated */
  bottom: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

#footercontent {
  max-width: 775px;
  min-width: 775px;
  margin-left: auto;
  margin-right: auto;
  background-color: #CBCADA;
  padding: 0px;
  text-align: center;
}

h1 {
  font-size: 25px;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <div id="container">
    <div id="topbar">
      <div id="header">
        <img src="http://via.placeholder.com/370x100">
        <img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
      </div>
    </div>
    <div id="content">
      <div id="nav">
        <p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
      </div>
      <div id="pagecontent">
        <h1>Lorem Ipsum</h1>
        <img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
          commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
          et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
          euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
          urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
          Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
          Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
          rhoncus, tempus eu nibh.</p>

        <ul>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
        </ul>
        <p>
          Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>

      </div>

    </div>
    <div id="footerbar" ">
    <div id="footercontent ">
     <p>Sed sagittis ac ex sed facilisis.</p>
    </div>
   </div>
  </div>
 </body>
</html>

3. pseudo-elements:

body,
html {
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-family: "Arial";
  font-size: 12px;
  height: 100%
}

* {
  box-sizing: border-box;
}

body {
  background-color: #E2EEDA;
}

#container {
  height: 100%;
  width: 100%;
}

#topbar {
  height: 100px;
  background-color: #CBCADA;
  border-bottom: 2px solid black;
}

#header {
  max-width: 775px;
  min-width: 775px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: #CBCADA;
}

#content {
  max-width: 775px;
  min-width: 775px;
  margin-left: auto;
  margin-right: auto;
  background-color: #E2EEDA;
  padding: 0px;
  /* additional */
  position: relative;
}

/* start additional */
#content:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  max-width: 200px;
  min-width: 200px;
  background-color: #CBDDE6;
  border-right: 1px solid black;
  z-index: -1;
}
/* end additional */

#nav {
  max-width: 200px;
  min-width: 200px;
  float: left;
  padding-top: 15px;
}

#nav img {
  padding-bottom: 10px;
}

#pagecontent {
  border-left: 10px;
  float: right;
  max-width: 565px;
  min-width: 565px;
  padding-top: 10px;
  display: block;
  /* additional */
  padding-bottom: 50px; /* offset footer height */  
}

#footerbar {
  height: 50px;
  width: 100%;
  background-color: #CBCADA;
  position: fixed;
  /* updated */
  bottom: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

#footercontent {
  max-width: 775px;
  min-width: 775px;
  margin-left: auto;
  margin-right: auto;
  background-color: #CBCADA;
  padding: 0px;
  text-align: center;
}

h1 {
  font-size: 25px;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <div id="container">
    <div id="topbar">
      <div id="header">
        <img src="http://via.placeholder.com/370x100">
        <img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
      </div>
    </div>
    <div id="content">
      <div id="nav">
        <p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
      </div>
      <div id="pagecontent">
        <h1>Lorem Ipsum</h1>
        <img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
          commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
          et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
          euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
          urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
          Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
          Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
          rhoncus, tempus eu nibh.</p>

        <ul>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
        </ul>
        <p>
          Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>

      </div>

    </div>
    <div id="footerbar" ">
    <div id="footercontent ">
     <p>Sed sagittis ac ex sed facilisis.</p>
    </div>
   </div>
  </div>
 </body>
</html>
UncaughtTypeError
  • 8,226
  • 4
  • 23
  • 38
0

If you are trying to make an element positioned based on the browser viewport this is not a good use of float or flex. You are trying to achieve an absolute position.

header{background:red; position:absolute; left:0; top:0; right:0; height:100px;}
nav{background:green; position:absolute; left:0; top:100px; bottom:50px; width:150px;}
content{background:yellow; position:absolute; left:150px; top:100px; right:0; bottom:50px;}
footer{background:blue; position:absolute; left:0; right:0; bottom:0; height:50px;}
<header></header>
<nav></nav>
<content></content>
<footer></footer>
N-ate
  • 6,051
  • 2
  • 40
  • 48