Добрый день!
Прохожу испытание, пишу код, в мини-браузере мне всё нравится, нажимаю “проверить”, и вот результат:
Первая половина в порядке, а вторая отображается совершенно не так, футер не видит вовсе. С чем это связано и как с этим бороться? Может я что-то не делаю не так?
Код HTML:
< body >
< div class=“block1 clearfix” >
< div class=“layout header” >
Header
< /div >
< div class=“layout menu” >
Menu
< /div >
< div class=“layout column clearfix” >
< div class=“column1” >
Promo 1
< /div >
< div class=“column2” >
Promo 2
< /div >
< /div >
< /div >
< div class=“block2 clearfix” >
< div class=“features left” >
Left
< /div >
< div class=“features main” >
Main
< /div >
< div class=“features right” >
Right
< /div >
< /div >
< div class=“footer” >
Footer
< /div >
< /body >
Код CSS(то что было написано мной):
.clearfix {
content: ‘’;
display: table;
clear: both;
}
.block1 {
background: #34495e;
width: 450px;
padding: 10px 0;
}
.header {
background: #c0392b;
padding: 5px;
width: 340px;
margin: 0px 50px;
height: 25px;
}
.menu {
background: #3498DB;
padding: 5px 55px;
margin-top: 10px;
margin-bottom: 10px;
height: 25px;
}
.column {
width: 350px;
margin: 0px 50px;
}
.column1 {
float: left;
background: #c0392b;
width: 160px;
padding: 5px;
height: 50px;
margin-right: 10px;
}
.column2 {
float: right;
background: #c0392b;
width: 160px;
padding: 5px;
height: 50px;
}
.block2 {
width: 360px;
padding: 10px 50px;
}
.left {
background: #3498DB;
padding: 5px;
height: 100px;
float: left;
margin-right: 10px;
width: 60px;
}
.main {
background: #3498DB;
padding: 5px;
height: 100px;
float: left;
margin-right: 10px;
width: 175px;
}
.right {
background: #3498DB;
padding: 5px;
height: 100px;
float: left;
width: 60px;
}
.footer {
background: #34495e;
padding: 5px 55px;
height: 25px
}