3

Между section, aside и nav не накладываются margin, как это исправить?
А так же, как сделать что бы footer при перемещении в .container не наезжал section и aside? https://jsfiddle.net/8jaxx1x9/1/

    <div class="container">
    <nav>
    <ul>
        <li class="selected">item1</li>
        <li class="item"><a href="#">item2</a></li>
        <li class="item"><a href="#">item3</a></li>
        <li class="item"><a href="#">item4</a></li>
        <li class="item"><a href="#">item5</a></li>
        <li class="item"><a href="#">item6</a></li>
    </ul>
    </nav>
    <section>
    <h1>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?</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, reiciendis. Excepturi voluptates eum mollitia repellendus.</p>
    </section>
    <aside>
        <h1>Lorem ipsum dolor sit amet.</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, facere!</p>
    </aside>
</div>
<footer>Ленива Компани!</footer>

Не имею понятия как сюда поместить CSS, за помощь благодарен.

2 ответа 2

4

Вертикальный(боковой) margin никогда не накладывается(не схлопывается), поэтому никак не исправить.

Чтобы футер не наезжал на section и aside при помещении футера в элемент container, необходимо перед футером поместить элемент с свойством clear: both, либо к самому футеру применить это свойство.

Что вам надо почитать, чтобы не возникало таких вопросов:

  1. Статьи о свойстве float и о его воздействии на поведение элементов
  2. Статьи о свойстве clear
  3. Статьи о схлопывании марджинов
  4. Статьи о хаке 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;
  }
}
    <div class="container">
    	<nav>
    	<ul>
    		<li class="selected">item1</li>
    		<li class="item"><a href="#">item2</a></li>
    		<li class="item"><a href="#">item3</a></li>
    		<li class="item"><a href="#">item4</a></li>
    		<li class="item"><a href="#">item5</a></li>
    		<li class="item"><a href="#">item6</a></li>
    	</ul>
    	</nav>
    	<section>
    	<h1>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?</h1>
    	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, reiciendis. Excepturi voluptates eum mollitia repellendus.</p>
    	<p>Itaque aut in eius repellendus, eaque, quaerat voluptates vero, ipsam recusandae, et unde. Aut, ut?</p>
    	<p>Eaque maxime eos, doloribus voluptatibus harum placeat, pariatur amet, perspiciatis officia hic corrupti, numquam repudiandae.</p>
    	<p>Consequuntur aperiam ullam dolores labore veritatis tempore magnam ducimus qui, voluptatum aliquam, dolorem, vel expedita!</p>
    	<p>Quidem, ipsa aperiam sequi qui. Optio aliquid, sed nisi inventore illo totam quisquam vero sit.</p>
    	<p>Tenetur reprehenderit minus facilis veritatis debitis quos totam incidunt, excepturi dolores error obcaecati, rerum molestias.</p>
    	<p>Ab nam ex hic numquam expedita, sint amet voluptate et, modi impedit aut? Incidunt, placeat.</p>
    	<p>Libero nemo ab saepe iure sed tempora adipisci! Mollitia, ratione delectus. Inventore eos nesciunt consequuntur!</p>
    	<p>Quos, tempore. Error saepe ullam distinctio modi perspiciatis? Incidunt voluptatum, esse dolorum veniam provident similique!</p>
    	<p>Fuga, labore, laboriosam aut laudantium officiis hic vitae, cum consectetur dolore, recusandae repellendus quisquam voluptates!</p>
    	</section>
    	<aside>
    		<h1>Lorem ipsum dolor sit amet.</h1>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, facere!</p>
    		<p>Quaerat iusto debitis sunt, distinctio sed magnam at vel. Ratione.</p>
    		<p>Soluta repellat assumenda consectetur, voluptas ex cumque doloremque similique quia.</p>
    		<p>Doloremque rerum, quos earum maiores deleniti consequuntur natus facere quam!</p>
    		<p>Voluptatibus perferendis natus saepe nesciunt et eveniet vel voluptates enim?</p>
    	</aside>
    	<div style="clear: both"></div>  	
<footer>Ленива Компани!</footer>
    </div>

4

Схлопывание марджинов не работает для блоков с установленным float. Вы можете убедиться в этом, убрав float из стилей. Вертикальные margin'ы схлопнутся.

При позиционировании колонок я рекомендую не использовать вертикальные отступы для самих колонок. Вместо этого вы можете задать вертикальные отступы для контента внутри колонок. И тогда - вертикальные margin'ы будут корректно схлопываться.

В вашем примере я собрал контент в section, aside и footer блоках - в простые div, и стилизовал их так:

section,
aside,
footer {
  background: #2db34a;
  color: #fff;
  margin: 0 1.858736059%;
  padding: 20px 0;
  text-align: center;
}

section > div,
aside > div,
footer > div {
  margin-top: 1.858736059%;
  margin-bottom: 1.858736059%;
}

Однако можно было бы, к примеру - задать верхний margin у заголовка в section. Он является первым элементом внутри section, и его margin-top схлопывался бы с margin-bottom у nav.

Рабочий пример на jsfiddle

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.