Two full height column layout with sticky footer using pure CSS

Question

I am struggling which seems to be a rather simple challenge.

I need to design simple layout which requirements are:

• pure CSS (no flex-box, no grid, just CSS - no libraries)
  
• fixed body/wrapper width (1024px, centered)
  
• fixed column width
  
• columns stretched 100% height, even if there is no content
  
• sticky footer (bottom attached)
  
• tabels can't be used

I came across a lot of answers here on Stack overflow, but nothing seems to work fully like I want. Here is the scheme:

Answer 1

This is what I came up so far:

body {
  height: 100%;
  background-color: #FFF;
}

.wrapper {
  overflow: hidden;
  margin: 0 auto;
  height: 100%;
  width: 1024px;
  background-color: #000000;
}

.header {
  padding: 10px;
  background-color: #33cc33;
  height: 100px;
}

.col-left {
  padding: 10px;
  float: left;
  height: calc(100vh - 174px);
  width: 300px;
  background-color: #ff0066;
}

.col-right {
  padding: 10px;
  float: left;
  height: calc(100vh - 174px);
  width: 684px;
  background-color: #0066ff;
}

.footer {
  padding: 10px;
  background-color: #99ff33;
  height: 50px;
  position: absolute;
  bottom: 0;
  width: 1004px;
}

<div class="wrapper">
  <div class="header">
    <p>test</p>
  </div>
  <div class="col-left">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
  </div>
  <div class="col-right">
    <p>test</p>
  </div>
  <div class="footer">
    <p>test</p>
  </div>
</div>

Code on JSFiddle:

https://jsfiddle.net/adorek/8kecq9pw/22/

Answer 2

Try adding position: relative to the parent element of the footer. position: absolute needs this as a reference point.