Верстка должна быть простой блочной, без bootstrap, flex, grid, display-table. Левая колонка должна быть по высоте такая же, как и правая.
* {
box-sizing: border-box;
}
.nav {
float: left;
width: 250px;
background-color: #F0E68C;
}
.content {
float: left;
width: calc(100% - 250px);
padding: 0 100px 0 50px;
background-color: blue;
}
<div class="container">
<section class="nav">
<ul>
<li><a href="#">конькобежный спорт</a></li>
<li><a href="#">биатлон</a></li>
</ul>
</section>
<section class="content">
<h1>Футбол</h1>
<p>Футбо́л (от англ. foot — ступня, ball — мяч) — командный вид спорта, в котором целью является забить мяч в ворота соперника ногами или другими частями тела (кроме рук) большее количество раз, чем команда соперника.</p>
<p>Есть 17 официальных правил игры, каждое из которых содержит список оговорок и руководящих принципов. Эти правила предназначены для применения на всех уровнях футбола, хотя есть некоторые изменения для таких групп, как юниоры, взрослые, женщины и люди с ограниченными физическими возможностями. Законы очень часто формулировались в общих чертах, которые позволяют упростить их применения в зависимости от характера игры.Правила игры публикуются в ФИФА, но поддерживаются Международным советом футбольных ассоциаций (IFAB)[31].</p>
</section>
</div>
Copy from SO en: https://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height
* {
box-sizing: border-box;
}
.container {
overflow: hidden;
}
.nav {
float: left;
width: 250px;
background-color: #F0E68C;
}
.content {
float: left;
width: calc(100% - 250px);
padding: 0 100px 0 50px;
background-color: blue;
}
section.nav, section.content {
margin-bottom: -500em;
padding-bottom: 500em;
}
<div class="container">
<section class="nav">
<ul>
<li><a href="#">конькобежный спорт</a></li>
<li><a href="#">биатлон</a></li>
</ul>
</section>
<section class="content">
<h1>Футбол</h1>
<p>Футбо́л (от англ. foot — ступня, ball — мяч) — командный вид спорта, в котором целью является забить мяч в ворота соперника ногами или другими частями тела (кроме рук) большее количество раз, чем команда соперника.</p>
<p>Есть 17 официальных правил игры, каждое из которых содержит список оговорок и руководящих принципов. Эти правила предназначены для применения на всех уровнях футбола, хотя есть некоторые изменения для таких групп, как юниоры, взрослые, женщины и люди с ограниченными физическими возможностями. Законы очень часто формулировались в общих чертах, которые позволяют упростить их применения в зависимости от характера игры.Правила игры публикуются в ФИФА, но поддерживаются Международным советом футбольных ассоциаций (IFAB)[31].</p>
</section>
</div>
Без флексов и таблиц остается только имитировать ...
* {
box-sizing: border-box;
}
.nav {
float: left;
width: 250px;
background-color: #F0E68C;
}
.content {
float: left;
width: calc(100% - 250px);
padding: 0 100px 0 50px;
background-color: blue;
}
/* Имитация равных колонок */
.container {
background-color: #F0E68C;
}
.container:after {
content: '';
display: block;
clear: both;
}
<div class="container">
<section class="nav">
<ul>
<li><a href="#">конькобежный спорт</a></li>
<li><a href="#">биатлон</a></li>
</ul>
</section>
<section class="content">
<h1>Футбол</h1>
<p>Футбо́л (от англ. foot — ступня, ball — мяч) — командный вид спорта, в котором целью является забить мяч в ворота соперника ногами или другими частями тела (кроме рук) большее количество раз, чем команда соперника.</p>
<p>Есть 17 официальных правил игры, каждое из которых содержит список оговорок и руководящих принципов. Эти правила предназначены для применения на всех уровнях футбола, хотя есть некоторые изменения для таких групп, как юниоры, взрослые, женщины и люди с ограниченными физическими возможностями. Законы очень часто формулировались в общих чертах, которые позволяют упростить их применения в зависимости от характера игры.Правила игры публикуются в ФИФА, но поддерживаются Международным советом футбольных ассоциаций (IFAB)[31].</p>
</section>
</div>
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости