Как разместить один блок после другого

Question

мне нужно чтобы цитата в section была по центру той части, которая идет после боковой панели, короче говоря посередине белого пространства, вот css

body{
    margin:0%;
}

aside {
    background-color: #cfdae7;
    height: 100%;
    width: 300px;
    font-family: Montserrat;
    color: #3d79a7;
    position: fixed;
    float:left;
}

aside a:not(.Physics){
    padding-top: 8px;
    padding-bottom:8px;
    font-size: 25px;
    display: block;
    text-decoration: none;
    text-align: center;
}

aside a:hover{
    text-decoration: underline;
}

aside a:active{
    color:#3d79a7;
}

aside .Physics{
    text-decoration: none;
    font-size: 3em;
    text-align: center;
    display:block;
    padding-top: 10px;
    padding-bottom:10px;
    background-color:#c5d0e6;
}

section {
    float:left;
}

а вот html

<!DOCTYPE html>
    <html lang="en">
        <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Введение в физику 9 класса</title>
    <link rel="stylesheet" href="main.css">
        </head>
        <body>
            <aside>
                <a href="" class="Physics">Физика</a>
                <a href="" class="Theory">Теория</a>
                <a href="" class="Tasks">Задания</a>
            </aside>
            <section>
                <h1>Физика — это наука понимать природу</h1>
                <h3>Курс физики 9 класса</h3>
            </section>
        </body>
    </html>

Answer 1

Держи

body {
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

aside {
  background-color: #cfdae7;
  min-height: 100vh;
  width: 300px;
  font-family: Montserrat;
  color: #3d79a7;
}

aside a:not(.Physics) {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 25px;
  display: block;
  text-decoration: none;
  text-align: center;
}

aside a:hover {
  text-decoration: underline;
}

aside a:active {
  color: #3d79a7;
}

.sec {
  width: calc(100% - 300px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

<aside>
  <a href="" class="Physics">Физика</a>
  <a href="" class="Theory">Теория</a>
  <a href="" class="Tasks">Задания</a>
</aside>
<section class="sec">
  <div class="center">
    <h1>Физика — это наука понимать природу</h1>
    <h3>Курс физики 9 класса</h3>
  </div>

</section>

БЛОГ НА HUSL

Как разместить один блок после другого

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