Как правильно установить фон блока div?

Question

У меня есть html-код, который я обернул в один блок <div class="container">. Я хотел сделать так, чтобы всё было серым, кроме самого блока container. Вот только его цвет выводится на экран очень странно, постоянно "отставая" от содержимого. Как это исправить? Вот сам код:

body {
  margin: 0;
  padding-top: 10px;
  background-color: #F3F3F3;
}

.container {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px 10px 20px 10px;
}

header {
  height: 75px;
  border-bottom: 2px solid #000;
}

h2 {
  margin-top: 0;
}

a {
  text-decoration: none;
  color: #000;
}

.child {
  display: inline-block;
}

#links {
  float: right;
  margin-top: 3px;
}

#admin {
  position: relative;
  float: right;
  margin-top: 25px;
  margin-right: -190px;
}

main {
  height: 300px;
  padding-top: 3px;
}

aside {
  float: left;
  width: 100px;
  font-size: 20px;
  border-right: 2px solid black;
  margin-right: 20px;
  border-bottom: 2px solid black;
  padding-left: 5px;
  padding-top: 5px;
  margin-top: -3px;
}

aside a {
  display: block;
  margin-bottom: 15px;
}

<div class="container">

  <header>
    <div class="child">
      <h2>Ваше название</h2>
    </div>
    <div id="links" class="child"><a href="#">Администраторы</a> | <a href="#">Выход</a></div>
    <div id="admin">
      <p>Вы - <a href=#>Администратор</a></p>
    </div>
  </header>

  <main>
    <aside>
      <a href="orders.php">Заказы</a>
      <a href="#">Товары</a>
      <a href="#">Отзывы</a>
      <a href="#">Категории</a>
      <a href="#">Клиенты</a>
      <a href="#">Новости</a>
      <a href="#">Сайт</a>
    </aside>
  </main>
</div>

P.S.: заранее спасибо за помощь! Я новичок во фронтенде,так что очень надеюсь, что мой вопрос не слишком глупый.

Answer 1

2 момента с ошибками:
• Контент, как Вы выражаетесь "не успевает", потому что вы жестко указали высоту в 300px. Если нужно задавать минимальную — используйте min-width.
• Не используйте float, они устарели. Современный подход в построении сетки — FlexBox (flex и всё что с этим связано). В Вашем примере контент будет обтекать aside (как только aside кончается, контент смещается влево).

body {
  margin: 0;
  padding-top: 10px;
  background-color: #F3F3F3;
}

.container {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px 10px 20px 10px;
}

header {
  height: 75px;
  border-bottom: 2px solid #000;
}

h2 {
  margin-top: 0;
}

a {
  text-decoration: none;
  color: #000;
}

.child {
  display: inline-block;
}

#links {
  float: right;
  margin-top: 3px;
}

#admin {
  position: relative;
  float: right;
  margin-top: 25px;
  margin-right: -190px;
}

main {
  /* Не ограничивайте принудительно высоту */
  /* height: 300px; */
  /* Если надо задать минимальную, используйте min-width */
  min-width: 300px;
  padding-top: 3px;
  /* Используйте flex */
  display: flex;
}

aside {
  /* Не используйте float */
  /* float: left; */
  width: 100px;
  font-size: 20px;
  border-right: 2px solid black;
  margin-right: 20px;
  border-bottom: 2px solid black;
  padding-left: 5px;
  padding-top: 5px;
  margin-top: -3px;
}

aside a {
  display: block;
  margin-bottom: 15px;
}

<div class="container">

  <header>
    <div class="child">
      <h2>Ваше название</h2>
    </div>
    <div id="links" class="child"><a href="#">Администраторы</a> | <a href="#">Выход</a></div>
    <div id="admin">
      <p>Вы - <a href=#>Администратор</a></p>
    </div>
  </header>

  <main>
    <aside>
      <a href="orders.php">Заказы</a>
      <a href="#">Товары</a>
      <a href="#">Отзывы</a>
      <a href="#">Категории</a>
      <a href="#">Клиенты</a>
      <a href="#">Новости</a>
      <a href="#">Сайт</a>
    </aside>
    <div class="content">
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
    </div>
  </main>
</div>

БЛОГ НА HUSL

Как правильно установить фон блока div?

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