Что не так с макетом div?

Question

Я довольно новичок в html и css, и у меня проблемы с пониманием макета. Вот пример, который я создал, чтобы показать мою проблему.

Я бы ожидал, что #bottom будет находиться внутри #page, но он находится ниже. Кроме того, div #else, который, как я думал, должен находиться ниже #page, находится в том же пространстве, что и # bottom.

Не могли бы вы помочь мне понять, что я делаю здесь неправильно?

header {
    display: block;
    margin: 0px auto;
  height: 20vh;
    width: 80vw;
  border: 1px solid green;
}

#page {
  margin: 0 auto;
  width: 90vw;
  border: 3px solid black;
}

#main  {
  display: block;
  float: left;
  height: 60vh;
  width: 67.5vw;
  border: 1px solid green;
}

#side  {
  display: inline-block;
  margin-left: 2px;
  height: 60vh;
  width: 21.5vw;
  border: 1px solid green;
}

#bottom  {
  float: left;
  margin: 0 auto;
  height: 4vh;
  width: 90vw;
  border: 1px solid green;
}

#else  {
  height: 10vh;
  width: 90vw;
  background-color: red;
  margin: 0 auto;
}

<div id="page">
        <header>
        </header>
        <div id="main">
        </div>       
        <div id="side">
        </div>
        <div id="bottom">
        </div>
    </div>
    <div id="else">
    </div>

Answer 1

Это самое близкое, что я могу сделать, чтобы вы поняли это на начальном уровне

*{
box-sizing:border-box; /* this will let the border/padding be included in the elements size */
}
#page {
  margin: 0 auto;
  width: 90%;
  border: 3px solid black;
}
header {
    display: inline-block;
    
    margin: 0 10%;
  height: 20vh;
    width: 80%;/* changed to percentage which is more logic to follow its parent not the viewport width */
  border: 1px solid green;
}

#main  {
  display: inline-block;
  height: 60vh;
  width: 67.5%;
  border: 1px solid green;
  margin:0;
  margin-left:5%;
}

#side  {
  display: inline-block;
  margin-left: 2px; 
  height: 60vh;
  width: calc(22.5% - 6px);/* 2 for the margin left, 4 for the borders*/
  border: 1px solid green;
  
}

#bottom  {
  /*float: left;*/
  margin: 0 auto;
  height: 4vh;
  width: 90%; /* percentage */
  border: 1px solid green;
}

#else  {
  height: 10vh;
  width: 90%;
  background-color: red;
  margin: 0 auto;
}

<div id="page">
        <header>
        </header>
        <div id="main">
        </div>       
        <div id="side">
        </div>
        <div id="bottom">
        </div>
    </div>
    <div id="else">
    </div>

Answer 2

Я рекомендую вам использовать flexbox. Вот быстрый адаптивный дизайн, который я сделал с селекторами HTML5. Поскольку вы новичок в HTML / CSS, я бы посоветовал вам начать обучение таким образом и избегать такого количества классов div, поскольку это не очень хорошо работает с доступностью, что является огромной проблемой в современном мире разработки.

И - это кодовое поле , с которым можно играть.

/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
  font-family: 'Roboto', sans-serif;
}

.content {
  flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  background: darkgray;  
}

header {
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ccc;
}

header h1 {
  font-size: 4rem;
  font-weight: 300;  
}

main {
  display: flex;
}

article {
  width: 70%;
  justify-content: flex-start;
  padding: 0.5rem;
}

aside {
  width: 30%;
  justify-content: flex-end;
  padding: 0.5rem;
}

.footer {
  flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
}

@media (max-width: 600px) {
  main {
    flex-direction: column;
  }
  
  main > article, aside {
    width: 100%;
  }
}






* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

footer {
  background: #333333;
  color: white;
  margin: 0;
  text-align: center;
}

<div class="content">
  <header>
    <h1>Header</h1>
  </header>
  <main>    
    <article>
      <h3>Current Article</h3>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit vero quibusdam maxime magnam rerum nemo provident? Commodi, non! Ad facilis, doloribus voluptatum alias nostrum voluptatibus enim libero, distinctio nam sunt similique pariatur nesciunt accusantium eveniet perferendis ea doloremque molestiae culpa consequuntur quia aspernatur, itaque voluptate? Voluptatem magni delectus harum totam.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga rerum repudiandae error eveniet est explicabo, nihil eum. Inventore laboriosam consectetur dolor consequatur. Unde in doloribus repellendus dolorum perferendis officia hic?</p>
      <p>Dicta molestias doloremque, corrupti dolorum ipsum ea perferendis neque a, animi magnam ab sint impedit repudiandae aspernatur vel natus cum suscipit vero nisi nihil blanditiis iste laborum. Eum, sunt quo!</p>
      <ul>
        <li>Lorem ipsum dolor sit.</li>
        <li>Nisi doloremque ut deserunt?</li>
        <li>Impedit aliquam itaque placeat.</li>
        <li>Sit incidunt iure assumenda.</li>
        <li>Inventore fuga optio perferendis!</li>
      </ul>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus illum aut quia alias delectus labore, maiores, excepturi quae nisi a non consequuntur! Officia fugiat enim nostrum molestias ipsa! Deleniti, repudiandae!</p>
      <p>Illo, reprehenderit? Ipsum velit aut, ducimus minima in accusamus aperiam ex cumque recusandae tenetur architecto nemo repellat asperiores eum. Corrupti blanditiis, odio sequi ea ducimus ipsam temporibus culpa asperiores dicta.</p>
      <p>Maxime alias, natus veritatis quis mollitia itaque voluptate iure neque dolore, expedita eaque, in ea sunt quibusdam ut ducimus fugit doloribus! Corporis molestiae nobis quae nesciunt inventore alias sed error.</p>
      <p>Id est repellendus pariatur harum, hic sequi vero ab mollitia corporis nisi, consequuntur eaque doloremque, suscipit nobis velit dolore totam exercitationem facere voluptas iure? Temporibus eius minus vero aut cumque!</p>
    </article>
    <aside>
      <h4>In other news:</h4>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat, culpa.</p>
      <p>Molestiae, officiis non esse perspiciatis provident a doloribus dignissimos sint!</p>
      <p>Inventore nihil illum maxime ipsa repudiandae quia omnis quae consequuntur!</p>
    </aside>
  </main>
</div>
<footer class="footer">
  Company Name | All rights reserved &copy;2020
</footer>

Answer 3

Я думаю, вы можете видеть это

        header {
            display: block;
            margin: 0px auto;
            height: 20vh;
            width: 90vw;
            background-color: #011a2f
        }

        #page {
            margin: 0 auto;
            width: 90vw;

        }

        #main {
            float: left;
            height: 60vh;
            width: 67.5vw;
            background-color: #323232
        }

        #side {
            overflow: hidden;
            margin-left: 2px;
            height: 60vh;
            width: 22.5vw;
            background-color: #ff1e56;
        }

        #bottom {
            height: 5vh;
            width: 90vw;
            background-color: #000000;
        }

        #else {
            height: 10vh;
            width: 90vw;
            background-color: #ffac41;
            margin: 0 auto;
        }

    <div id="page">
        <header></header>
        <div id="main"></div>
        <div id="side"></div>
        <div id="bottom"></div>
    </div>
    <div id="else"></div>

Answer 4

 <body>
    <div id="page">
        <header>Header</header>
        <div id="main">Main</div>       
                <div id="side">Side</div>
      <div id="bottom">Bottom</div>
    </div>
    <div id="else">Else</div>
</body>

А css

header {
    display: block;
    margin: 0px auto;
  height: 20vh;
    width: 80vw;
  border: 1px solid green;
}

#page {
  margin: 0 auto;
  width: 90vw;
  border: 3px solid black;
}

#main  {
  display: block;
  float: left;
  height: 60vh;
  width: 67.5vw;
  border: 1px solid green;
}

#side  {
  display: inline-block;
  margin-left: 2px;
  height: 60vh;
  width: 21.5vw;
  border: 1px solid green;
}

#bottom  {
  margin: 0 auto;
  height: 4vh;
  width: 90vw;
  border: 1px solid green;
  background-color:#ddd;
}

#else  {
  height: 10vh;
  width: 90vw;
  background-color: red;
  margin: 0 auto;
}

https://codepen.io/erwinagpasa/pen/ZEGjqjY

Answer 5

Я только что внес несколько корректировок в ваш код, надеюсь, с вами все будет в порядке:

Примечание. Для большей наглядности просмотрите в полноэкранном режиме.

#page {
  margin: 0 auto;
  width: 90vw;
  border: 1px solid black;
}
header {
    display: absolute;
    margin: 0px auto;
  height: 20vh;
    width: 80vw;
  border: 1px solid green;
}

#main  {  
  float: left;
  height: 60vh;
  width: 67.5vw;
  border: 1px solid green;
}

#side  {
  display: inline-block;
  margin-left: 2px;
  height: 60vh;
  width: 21.5vw;
  border: 1px solid green;
}

#bottom  { 
  height: 4vh;
  width: 90vw;
  border: 1px solid green;
  background-color:green;
}

#else  {
  height: 10vh;
  width: 90vw;
  background-color: pink;
  margin: 0 auto;
}

<div id="page">
        <header>header
        </header>
        <div id="main">main
        </div>       
        <div id="side">side
        </div>
        <div id="bottom">bottom
        </div>
    </div>
    <div id="else">else
    </div>

Answer 6

Не понимаю, почему вы положили этот float: оставил в нижнем колонтитуле. Если вы удалите его, все должно работать нормально

#bottom  {
  margin: 0 auto;
  height: 4vh;
  width: 90vw;
  border: 1px solid green;
}

Answer 7

Удалить поплавок слева от #bottom

#bottom  {
  background-color:green;
  margin: 0 auto;
  height:50px;
  width:100px;
  border: 1px solid green;
}

вот ссылка: https://codepen.io/Dholu_Effect/pen/PoqByQa?editors=1100

Также я бы предложил вам использовать Flex-box, это сделает все намного проще.