Почему блок left не прилегает к footer?

Question

Мне нужно сделать нечто подобное (не обращайте внимание на то, что отличается выравнивание текста на 1 и 2 картинке, это сейчас не принципиально):

Я написал код, адаптировав его под условия своей задачи (код прикреплю ниже), вот что получилось:

Проблемы: 1) блок left не прилегает к footer; 2) ссылки не должны быть такими, они должны быть белыми. Как исправить эти проблемы? Вроде тупой вопрос, но что-то не нахожу решений.

index.html:

<!DOCTYPE HTML>
<html>
<head><title>Block_Verstka</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<bodylink="white" alink="red">
<div class="all">
<div class="logo">
<img src="Lighthouse.jpg" height="100" width="250">
</div>
    <div class="top">Хедер</div>
    <div class="left">MENU<p><a></a></p> 
<p><a href="1.htm">Главная</a></p>
<p><a href="2.htm">История</a></p>
<p><a href="3.htm">Галерея</а></р>
<p><a></a></p>
</div>
    <div class="content">
<pre></pre>
<p>Существуют две основные трактовки понятия «текст»: имманентная (расширенная, философски нагруженная) и репрезентативная (более частная). Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры. Репрезентативный — рассмотрение текста как особой формы представления информации о внешней тексту действительности.</р>
<p align="center"><img src="dog.jpg" height="100" width="120"></p>
</div>
<div class="clear"></div>
    <div class="footer">Footer 
    <p>ФУтЕр</p></div>
    </div></body></html>

style.css:

body, html { 
    width: 100%;
        min-width: 1000px;
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: tahoma;
        background: #ffffff;
        color: #ffffff;
}

.all {
    width: 1000px;
        margin: 0 auto;
}

.logo {
    background: #009e9d; 
    width: 250px;
    height: 100px; 
    padding: 10px 0; 
    float: left;
}

.top {
    background: #009e9d; 
        width: 750px; 
        height: 100px; 
        float: left; 
    padding: 10px 0; 
    font-size: 30px; 
    line-height: 24px; 
    text-align: center;
    text-transform: uppercase; 
}

.left {
    background: #0010d5; 
    float: left; 
    width: 250px; 
    height: З00рх;
    font-size: 20px; 
    text-align: center; 
    text-transform: uppercase;
}

.content {
    background: #97969b; 
    float: left; 
    width: 750px; 
    height: 300рх; 
        text-indent: 20; 
        text-indent: 10 px;
        line-height: 24px;
        text-align: justify; 
    font-family: tahoma;
}

.clear { 
    clear: both;
}

.footer {
    background: #28282a; 
    padding: 100px 0; 
    padding: 50px 0; 
    font-size: 20px; 
    line-height: 24px; 
    text-align: center; 
    text-transform: uppercase;
}

Answer 1

Вот ваша разметка. Grid. Посмотрите, как всё просто, красиво, логично и эротично:

* {margin: 0; color: white;}

.container {
  display: grid; grid-template-columns: repeat(4, 1fr); min-height: 100vh;
}

.header {
  grid-column: span 4 / auto; height: 15vh; background: mediumseagreen;
}

.footer {
  grid-column: span 4 / auto; height: 15vh; background: black;
}

.sidebar {
  grid-column: span 1 / auto; min-height: 70vh; background: cornflowerblue;
}

.content {
  grid-column: span 3 / auto; min-height: 70vh; background: darkgray;
}

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Text</div>
  <div class="footer">Footer</div>
</div>

Flex. Также всё просто, красиво, логично, но не эротично:

* {margin: 0; color: white;}

.container {min-height: 100vh;}

.header {height: 15vh; background: mediumseagreen;}
.footer {height: 15vh; background: black;}

.box {display: flex; min-height: 70vh;}

.sidebar {flex: 1 1 auto; background: cornflowerblue;}
.content {flex: 4 1 auto; background: darkgray;}

<div class="container">
  <div class="header">Header</div>
  <div class="box">
    <div class="sidebar">Sidebar</div>
    <div class="content">Text</div>
  </div>
  <div class="footer">Footer</div>
</div>

И inline-block+float. Также всё просто, вроде как красиво и логично, но уже совсем не эротично:

* {margin: 0; color: white;}

.container {min-height: 100vh;}

.header {height: 15vh; background: mediumseagreen;}
.footer {height: 15vh; background: black;}

.box {min-height: 70vh;}

.sidebar {
  float: left; display: inline-block; width: 25%; min-height: 70vh;
  background: cornflowerblue;
}
.content {
  display: inline-block; width: 75%; min-height: 70vh;
  background: darkgray;
}

<div class="container">
  <div class="header">Header</div>
  <div class="box">
    <div class="sidebar">Sidebar</div>
    <div class="content">Text</div>
  </div>
  <div class="footer">Footer</div>
</div>

Answer 2

Аналог ответа @Sevastopol' через области:

* {margin: 0; color: white;}

.container {
  display: grid;
  grid-template-columns: 25% 1fr;
  grid-template-rows: 15% 1fr 15%;
  grid-template-areas: "header header" "sidebar content" "footer footer";
  min-height: 100vh;
}

.header {
  grid-area: header;
  background: mediumseagreen;
}

.footer {
  grid-area: footer;
  background: black;
}

.sidebar {
  grid-area: sidebar;
  background: cornflowerblue;
}

.content {
  grid-area: content;
  background: darkgray;
}

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Text</div>
  <div class="footer">Footer</div>
</div>

БЛОГ НА HUSL

Почему блок left не прилегает к footer?

Ответы (2 шт):