Между section, aside и nav не накладываются margin, как это исправить?
А так же, как сделать что бы footer при перемещении в .container не наезжал section и aside?
https://jsfiddle.net/8jaxx1x9/1/
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, facilis enim debitis commodi sequi tempora dolores suscipit est, eum error rerum laboriosam quaerat quisquam aliquid explicabo beatae quidem ipsam quia?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, reiciendis. Excepturi voluptates eum mollitia repellendus.
Не имею понятия как сюда поместить CSS, за помощь благодарен.
Ответ
Вертикальный(боковой) margin никогда не накладывается(не схлопывается), поэтому никак не исправить.
Чтобы футер не наезжал на section и aside при помещении футера в элемент container, необходимо перед футером поместить элемент с свойством clear: both, либо к самому футеру применить это свойство.
Что вам надо почитать, чтобы не возникало таких вопросов:
Статьи о свойстве float и о его воздействии на поведение элементов
Статьи о свойстве clear
Статьи о схлопывании марджинов
Статьи о хаке clearfix
body {
font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
h1 {
font-size: 20px;
font-weight: bold;
margin-bottom: 6px;
}
.container:before,
.container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.container {
background: #eaeaed;
margin-bottom: 24px;
*zoom: 1;
}
section {
float: left;
width: 63.197026%;
}
aside {
float: right;
width: 29.3680297%;
}
.container,
nav, section,
aside, footer {
border-radius: 6px;
}
section,
aside, footer {
background: #2db34a;
color: #fff;
margin: 1.858736059%;
padding: 20px 0;
text-align: center;
}
section {
float: left;
width: 63.197026%;
}
aside {
float: right;
width: 29.3680297%;
}
nav {
background-color: #2db34a;
margin: 1.858736059%;
text-align: center;
}
nav ul {
margin: 0px;
padding: 5px 0px 5px 0px;
}
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
border-radius: 6px;
}
nav ul li a:link, nav ul li a:visited {
color: white;
border-bottom: none;
font-weight: bold;
text-decoration: none;
}
nav ul li.selected {
background-color: lightgreen;
font-weight: bold;
color: white;
}
@media all and (max-width: 420px) {
section, aside, footer {
float: none;
width: auto;
}
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, facilis enim debitis commodi sequi tempora dolores suscipit est, eum error rerum laboriosam quaerat quisquam aliquid explicabo beatae quidem ipsam quia?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, reiciendis. Excepturi voluptates eum mollitia repellendus.
Itaque aut in eius repellendus, eaque, quaerat voluptates vero, ipsam recusandae, et unde. Aut, ut?
Eaque maxime eos, doloribus voluptatibus harum placeat, pariatur amet, perspiciatis officia hic corrupti, numquam repudiandae.
Consequuntur aperiam ullam dolores labore veritatis tempore magnam ducimus qui, voluptatum aliquam, dolorem, vel expedita!
Quidem, ipsa aperiam sequi qui. Optio aliquid, sed nisi inventore illo totam quisquam vero sit.
Tenetur reprehenderit minus facilis veritatis debitis quos totam incidunt, excepturi dolores error obcaecati, rerum molestias.
Ab nam ex hic numquam expedita, sint amet voluptate et, modi impedit aut? Incidunt, placeat.
Libero nemo ab saepe iure sed tempora adipisci! Mollitia, ratione delectus. Inventore eos nesciunt consequuntur!
Quos, tempore. Error saepe ullam distinctio modi perspiciatis? Incidunt voluptatum, esse dolorum veniam provident similique!
Fuga, labore, laboriosam aut laudantium officiis hic vitae, cum consectetur dolore, recusandae repellendus quisquam voluptates!
Комментариев нет:
Отправить комментарий