Почему нижний колонтитул идет в область боковой панели?

Я думаю, что это вопрос noob и уже ответил, но я не смог найти ответ.Почему нижний колонтитул идет в область боковой панели?

codepen

Я делаю простой макет 2 столбца. столбцы работают нормально, но нижний колонтитул переходит в область боковой панели, если область содержимого выше, чем область боковой панели. HTML:

/* SECTIONS */ 
 
.section { 
 
\t clear: both; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
} 
 

 
/* COLUMN SETUP */ 
 
.col { 
 
\t display: block; 
 
\t float:left; 
 
\t margin: 1% 0 1% 1.6%; 
 
} 
 
.col:first-child { margin-left: 0; } 
 

 

 
/* GROUPING */ 
 
.group:before, 
 
.group:after { 
 
\t content:""; 
 
\t display:table; 
 
} 
 
.group:after { 
 
\t clear:both; 
 
} 
 
.group { 
 
    zoom:1; /* For IE 6/7 */ 
 
} 
 

 
/* GRID OF THREE */ 
 
.span_2_of_3 { 
 
\t width: 66.1%; 
 
} 
 
.span_1_of_3 { 
 
\t width: 32.2%; 
 
} 
 

 
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 
 

 
@media only screen and (max-width: 480px) { 
 
\t .col { margin: 1% 0 1% 0%;} 
 
\t .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; } 
 
}

<html> 
 
<head> 
 
</head> 
 
<body> 
 
<div class="wrapper"> <div class="container"> 
 
<div class="col span_2_of_3"> 
 
    <div>Sed at ante finibus, porttitor nunc sit amet, interdum tellus. Suspendisse tincidunt lectus a enim tincidunt, quis semper tellus luctus. Mauris ut dui dolor. Donec imperdiet fringilla ornare. Nunc in lectus magna. Curabitur at purus libero. Nunc ultricies scelerisque felis. Proin tristique, odio id pharetra condimentum, metus libero porta lacus, at eleifend justo sapien eu ipsum. Donec vel purus gravida, convallis ligula id, scelerisque urna. In eleifend mattis mauris sit amet pharetra. Praesent eget libero augue. Vestibulum ut justo hendrerit, ornare erat sit amet, tristique augue. Quisque tortor ex, pulvinar sit amet elementum nec, fringilla eu urna. Fusce interdum convallis felis, sit amet posuere nulla ornare a. Quisque quis vulputate lacus. Proin mollis lectus mi, sed egestas nibh mollis in. Sed at ante finibus, porttitor nunc sit amet, interdum tellus. Suspendisse tincidunt lectus a enim tincidunt, quis semper tellus luctus. Mauris ut dui dolor. Donec imperdiet fringilla ornare. Nunc in lectus magna. Curabitur at purus libero. Nunc ultricies scelerisque felis. Proin tristique, odio id pharetra condimentum, metus libero porta lacus, at eleifend justo sapien eu ipsum. Donec vel purus gravida, convallis ligula id, scelerisque urna. In eleifend mattis mauris sit amet pharetra. Praesent eget libero augue. Vestibulum ut justo hendrerit, ornare erat sit amet, tristique augue. Quisque tortor ex, pulvinar sit amet elementum nec, fringilla eu urna. Fusce interdum convallis felis, sit amet posuere nulla ornare a. Quisque quis vulputate lacus. Proin mollis lectus mi, sed egestas nibh mollis in. </div> 
 
    </div> 
 
<div class="col span_1_of_3"> 
 
Here is widget content 
 
    </div></div></div> 
 
<footer> 
 
<div class="container"> 
 
This is footer content 
 
</div> 
 
</footer> 
 
    </body> 
 
</html>

источник

2015-01-29 Sahriar Saikat

http://codepen.io/anon/pen/azyEbb

Вы забыли закрыть один DIV, и ваш колонтитул нуждается

footer { 
    clear: both; 
}

, а также.

источник

2015-01-29 08:27:19 Sirence

Можно ли добавить 'ясно: как' в различных пустой DIV ? '

' css: '.clearing {clear: both;}'? –

да ... мой комментарий работает .. –

Да, это было бы так же. Вы также можете добавить свой класс .clearing к нижнему колонтитулу -

– Sirence

То же решение, что и от Sirence, только другой код:

CSS:

.clearfix:after { 
    content: "."; 
    clear: both; 
    display: block; 
    visibility: hidden; 
    height: 0px; 
}

HTML:

<html> 
<head> 
</head> 
<body> 
<div class="wrapper clearfix"> 
    <div class="container"> 
     <div class="col span_2_of_3"> 
      <div>Sed at a...stas nibh mollis in.</div> 
     </div> 
    </div> 
    <div class="col span_1_of_3"> 
     Here is widget content 
    </div> 
</div> 
<footer> 
    <div class="container"> 
     This is footer content 
    </div> 
</footer> 
</html>

источник

2015-01-29 08:29:21

это сложно! u добавил точку в clearfix div и спрятал ее. Это так? –

Да. Разница с решением Sirence заключается в том, что нижний колонтитул не должен знать о плавающих дивинах над ним. Вы добавляете класс в div, которые вы хотите, чтобы поплавки были очищены впоследствии. –

Почему нижний колонтитул идет в область боковой панели?

ответ

Смежные вопросы