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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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