Сетки / Испытание: строим сетку [27/32] Завершено на 100%

Курсы §15. Сетки
1

Добрый день.
Предлагаю свой 100% вариант с претензией на логику. Старался делать грамотно.
Все двигается, нигде ничего не выползает.

Имя файла изображения458×736 14.1 KB

Если подскажете что-то по оптимизации кода, буду рад услышать и применить это.

Песочница: http://jsbin.com/wepepavuvi/edit?html,css,output

UPD

Прикрепил активное меню из задания “Мастерская: создаём меню / Испытание: вертикальное меню [9/28]”

Песочница: http://jsbin.com/sitikiwedi/edit?html,css,output
Страница HTML для браузера: https://ru.files.fm/u/pxytejy#
Страница отличается от той, что в песочнице. Подобраны размеры для просмотра в браузере и они стали динамичными.
Скрин с браузера:

Имя файла изображения1659×978 151 KB

4 лайка
3

100% прохождение на float’ах.

HTML:

<html lang="ru">

<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>

<header>
	<div class="container">
		<div class="head">Header</div>
	</div>
	<div class="container-full">
		<div class="menu">Menu</div>
	</div>
	<div class="container">
		<div class="promo1">Promo 1</div>
		<div class="promo2">Promo 2</div>
		<div class="clear"></div>
	</div>
</header>

<div class="container">
	<div class="content">
		<aside class="left">Left</aside>
		<section class="main">Main</section>
		<aside class="right">Right</aside>
		<div class="clear"></div>
	</div>
</div>

<footer>
  <div class="container-full">
    <div class="footer">Footer</div>
   </div>
</footer>

CSS:

html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 450px;
  height: 335px;

  font-size: 10px;
  font-family: "Arial", sans-serif;
  color: white;
}

.container {
  width: 350px;
  margin: 0 auto;
  box-sizing: border-box;
}

.container-full {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

header {
  background-color: #34495e;
  padding: 10px 0 10px 0;
}

.head {
  padding: 5px;
  box-sizing: border-box;
  background-color: #c0392b;
  height: 35px;
  margin-bottom: 10px;
}

.menu {
  height: 35px;
  box-sizing: border-box;
  padding: 5px 0 0 55px;
  margin-bottom: 10px;
  background-color: #3498db;
}

.promo1, .promo2 {
  box-sizing: border-box;
  padding: 5px;
  height: 60px;
  width: 170px;
  background-color: #c0392b;
}

.promo1 {
  float: left;
}

.promo2 {
  float: right;
}

.clear {
    clear: both;
}

.content {
  margin: 10px 0 10px 0;
}

.left {
  box-sizing: border-box;
  padding: 5px;
  height: 110px;
  width: 70px;
  float: left;
  background-color: #3498db;
}

.main {
  box-sizing: border-box;
  padding: 5px;
  height: 110px;
  float: left;
  margin-left: 10px;
  width: 190px;
  background-color: #3498db;
}

.right {
  box-sizing: border-box;
  padding: 5px;
  height: 110px;
  width: 70px;
  float: right;
  background-color: #3498db;
}

.footer {
  background-color: #34495e;
  height: 35px;
  box-sizing: border-box;
  padding: 5px 0 0 55px;
}
1 лайк
4

ПРошла на 100%. Но при загрузке в браузер, естественно, удалив размер боди, чтобы все тянулось по ширине браузера, вылезла светло-голубая полоска. Почему?

41
Снимок экрана 2019-10-18 в 9.36.41.png2880×1800 533 KB

html,
body {
margin: 0;
padding: 0;
}

body {

height: 335px;

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}
/* хедер*/
.heder-background{
width: 100%;
background-color: #34495e;
padding-top: 10px;
padding-bottom: 5px;
min-height:35px
}

.heder{
background-color: #c0392b;
margin:auto;
width: 340px;
padding: 5px;
min-height:25px;

}

.menu{
background-color: #3498db;
padding: 5px;
min-height: 25px;
margin-bottom:5px;
margin-top:10px
}

.menu-flex{
margin:auto;
width: 340px;
padding: 5px;
padding-top: 0px;

}

.promo-flex{
margin:auto;
width: 350px;
margin-top:10px;
margin-bottom:5px;

}

.promo{
background-color: #c0392b;
padding: 5px;
width: 160px;
min-height:50px
}

.float-right{
float: right;
}
.float-left{
float: left;
}

.clearfix::after {
content: “”;
display: table;
clear: both;
}

/главное/
.main, .left, .right{
background-color: #3498db;
min-height: 100px;
padding: 5px
}
.left {
width: 60px;
margin-right: 10px}

.right{
width: 60px}

.main {
width: 180px;
float: left}

.footer{
padding-top:5px}

34
Снимок экрана 2019-10-18 в 9.48.34.png1332×972 150 KB

5

26
Снимок экрана 2019-10-18 в 10.00.26.png2860×1800 516 KB

а потом ушло, когда поменяла контент. При этом вставляла разный, и больше эта полоска не появлялась.
ПРошу критики. Не сильно ли намудрила в коде?

6

Прошел испытание, но кажеться делал неправильно, подскажите где сделал ошыбки?

Испытание: строим сетку

Header

Menu

Promo 1

Promo 2

Left

Main

Right

Footer

html,
body {
margin: 0;
padding: 0;
}

body {
width: 450px;
height: 335px;

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}

.header {
background-color:#34495e;
}

.header .layout-column {
min-height: 30px;
padding: 5px 0 0 5px;
background-color: #c0392b;
}

.layout-positioner {
width: 350px;
margin: 0 auto;
padding: 10px;
}

.layout-positioner::after {
content:"";
display: table;
clear: both;
}

.menu {
background-color: #3498db;
}

.menu .layout-positioner {
padding: 5px;
}

.menu .layout-column {
min-height: 25px;
padding: 0 0 0 5px;
background-color: #3498db;
}

.promo {
background-color: #34495e;
}

.promo .layout-column {
min-height: 55px;
padding: 5px 0 0 5px;
background-color: #c0392b;
}

.promo .layout-column1 {
float: left;
width: 165px;
}

.promo .layout-column2 {
width: 165px;
float: right;
}

.sides .layout-column {
margin-right: 10px;
min-height: 105px;
padding: 0 0 0 5px;
background-color: #3498db;
}

.sides .layout-column:last-child {
margin-right: 0;
}

.sides .layout-columns1 {
float: left;
width: 65px;
padding-top: 5px;
}

.sides .layout-columns2 {
float: left;
width: 185px;
padding-top: 5px;
}

.sides .layout-columns3 {
float: right;
width: 65px;
padding-top: 5px;
}

.footer {
background-color: #34495e;
}

.footer .layout-positioner {
padding: 5px;
}

.footer .layout-column {
min-height: 25px;
padding: 0 0 0 5px;
background-color: #34495e;
}