Background color column CSS-CodePudding

I have 2 columns and a footer. One of the columns is much smaller in content than the other, but I need them to match so both of their background colors run all the way to the footer. It isn't a problem for the larger one, but not the other.

<div >
    <div >
      <div  id="topmodel">
        <h2>ColumnA</h2>
        <p><img src="img/ColumnA.jpg" />ColumnAtext</p>
        <p>ColumnA Text
      </div>
    </div>
    <div >
      <ul>
        <li><a href="#">linkA</a></li>
        <li><a href="#">linkB</a></li>
        <li><a href="#">linkC</a></li>
        <li><a href="#">linkD</a></li>
      </ul>
    </div>
  </div>
  <div >
    <p>Footertext</p>
  </div>


.links {
    background:#55C5E8;
    padding:1em 2.5%;
    width: 30%;
    float: left; 
}
.rechts {
    background:#FD6943;
    padding:1em 2.5%;
    width: 60%;
    float: left;
}
.cf {
    clear:both
}
/*clearfix hack*/
.clearfix::before,
.clearfix::after {
    content: " ";
    display: table;
}
.clearfix::after {
    clear: both;
}

CodePudding user response：

Make the midden container a flexbox container

.midden { display: flex;}

CodePudding user response：

You can either flex the midden div. OR, if you want to preserve your HTML structure, you can set fixed heights on both of your children. See the CSS changes I made below.

.links {
    background:#55C5E8;
    padding:1em 2.5%;
    width: 30%;
    float: right; 
    height: 150px;
}
.rechts {
    background:#FD6943;
    padding:1em 2.5%;
    width: 60%;
    float: left;
    height: 150px;
}
.cf {
    clear:both
}

.container {
  height: 100vh;
  width: 100%;
}

<div >
<div >
    <div >
      <div  id="topmodel">
        <h2>ColumnA</h2>
        <p><img src="img/ColumnA.jpg" />ColumnAtext</p>
        <p>ColumnA Text
      </div>
    </div>
    <div >
      <ul>
        <li><a href="#">linkA</a></li>
        <li><a href="#">linkB</a></li>
        <li><a href="#">linkC</a></li>
        <li><a href="#">linkD</a></li>
      </ul>
    </div>
  </div>
</div>

  <div >
    <p>Footertext</p>
  </div>