текст сайд бара уходит вниз, но сам сайд бар в просмотре кода страницы отображается корректно

Question

* {
  font-size: 18px;
  background-color: #F6F6F6;
  font-family: 'Big Shoulders Stencil Text', cursive;
  box-sizing: border-box;
}

.header {
  background-color: #F7F7F7;
  width: 89%;
  height: 85px;
  margin-left: 11%;
  margin-bottom: 10px;
  float: right;
}

.content {
  background-color: white;
  width: 89%;
  height: 865px;
  margin-left: 11%;
  border: #A7D7F9 solid 2px;
  float: right;
}

.sidebar {
  width: 11%;
  height: 960px;
  background-color: #F7F7F7;
  margin-right: 90%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text:wght@100;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <meta charset="utf-8" />
  <link href="style2.css" rel="stylesheet" type="text/css" />
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
  <title>верстка</title>
</head>

<body>
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="sidebar">sidebar</div>
</body>

</html>

Answer 1

* {
  font-size: 18px;
  background-color: #F6F6F6;
  font-family: 'Big Shoulders Stencil Text', cursive;
  box-sizing: border-box;
}

.header {
  background-color: #F7F7F7;
  height: 85px;
  margin-bottom: 10px;

}

.content {
  background-color: white;
  height: 865px;
  border: #A7D7F9 solid 2px;

}

// групируем весь контент который будет справа в отдельный div
.right {
width: 89%;
height: 960px;
float: right; //указываем что блок будет с права, а обтекание блока с левой стороны
}

.sidebar {
  width: 11%;
  height: 960px;
  background-color: #F7F7F7;
  float: left; //указываем что блок будет с лева, а обтекание блока с правой стороны
}

// добавляем блок для очистки от свойств float. Нужно для того, чтобы если внизу будут еще какие-то блоки, то верстка не ехала.
.clear{
float: none; //убираем обтекиние
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text:wght@100;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <meta charset="utf-8" />
  <link href="style2.css" rel="stylesheet" type="text/css" />
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
  <title>верстка</title>
</head>

<body>
<div class='right'>
  <div class="header">header</div>
  <div class="content">content</div>
</div>
  <div class="sidebar">sidebar</div>
<div class='clear'></div>
</body>

</html>

БЛОГ НА HUSL

текст сайд бара уходит вниз, но сам сайд бар в просмотре кода страницы отображается корректно

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