Footer налезает на блок с контентом

265

31 июля 2017, 11:26

Здравствуйте, такая проблема: почему-то у меня img как-будто не имеет веса.

.conteiner { 
  padding: 0px; 
  margin: 25 auto; 
  max-width: 900px; 
  text-align: center; 
  background: #fdfcfc; 
  min-height: 100px; 
  border-top: 1px solid #000; 
  border-bottom: 1px solid #000; 
} 
 
.title { 
  margin: 25px; 
} 
 
h1 { 
  margin-bottom: 5px; 
  font-size: 30px; 
  text-transform: uppercase; 
} 
 
.text { 
  margin: 10px; 
  color: #666; 
} 
 
.icons { 
  display: block; 
  padding-top: 20px; 
  padding-bottom: 20px; 
} 
 
.icon1 { 
  float: left; 
  height: 290; 
  width: 320; 
} 
 
.footer { 
  margin: 12 auto; 
  width: 150px; 
  min-width: 300px; 
  text-align: center; 
}

<section> 
  <div class="conteiner"> 
 
    <div class="title"> 
 
      <h1>Proin iaculis purus consequat sem cure.</h1> 
      <p class="text">Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.</p> 
      <div class="icons"> 
        <img src="img/img.jpg" class="icon1" style="opacity:0.25;filter:alpha(opacity=25)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"> 
      </div> 
 
    </div> 
 
  </div> 
</section> 
 
<div class="footer"> 
  Copyright 2017 
</div>

Answer 1

Необходимо очистить поток от float: left;

.title:after {
    content: "";
    display: table;
    clear: both;
}

Пример

.conteiner { 
  padding: 0px; 
  margin: 25px auto; 
  max-width: 900px; 
  text-align: center; 
  background: #fdfcfc; 
  min-height: 100px; 
  border-top: 1px solid #000; 
  border-bottom: 1px solid #000; 
} 
 
.title { 
  margin: 25px; 
} 
 
h1 { 
  margin-bottom: 5px; 
  font-size: 30px; 
  text-transform: uppercase; 
} 
 
.title:after { 
  content: ""; 
  display: table; 
  clear: both; 
} 
 
.text { 
  margin: 10px; 
  color: #666; 
} 
 
.icons { 
  display: block; 
  padding-top: 20px; 
  padding-bottom: 20px; 
} 
 
.icon1 { 
  float: left; 
  height: 290; 
  width: 320; 
} 
 
.footer { 
  margin: 12px auto; 
  width: 150px; 
  min-width: 300px; 
  text-align: center; 
}

<section> 
  <div class="conteiner"> 
 
    <div class="title"> 
 
      <h1>Proin iaculis purus consequat sem cure.</h1> 
      <p class="text">Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.Proin 
        iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.</p> 
      <div class="icons"> 
        <img src="http://via.placeholder.com/300.png/09f/fff" class="icon1" style="opacity:0.25;filter:alpha(opacity=25)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"> 
      </div> 
 
    </div> 
 
  </div> 
</section> 
 
<div class="footer"> 
  Copyright 2017 
</div>