DIVy rozwalają stronę

Dla specjalistów Webmastering
#1

Witam,

Mam mały problem z umiejscowieniem divów na stronie. Otóż chcę aby znajdowały się one w liczbie 2 sztuk na rząd (a rzędów będzie kilka) i tak też się dzieje, ale rozwalają mi one stronę wychodząc poza obszar głównego diva (main). Jak to naprawić?

Kod wygląda tak:


<div class="main">

  <p>

  <div class="caption">tekst</div>

  </p>
 
  <p style="font-size: 20px; margin-top: -15px; text-align: center;">tekst</p>

  <hr class="solid">

  <br>



  <a href="strona.htm">

  <div class="weather">
  
  <img src="foto.png">
  
  <div class="weatherdesc">

  <div class="caption">TEKST</div>

  <p>

  tekst

  </p>

  </div>

  </div>

  </a>


  <a href="strona.htm">

  <div class="weather">
  
  <img src="foto.png">
  
  <div class="weatherdesc">

  <div class="caption">TEKST</div>

  <p>

  tekst

  </p>

  </div>

  </div>

  </a>


  <a href="strona.htm">

  <div class="weather">
  
  <img src="foto.png">
  
  <div class="weatherdesc">

  <div class="caption">TEKST</div>

  <p>

  tekst

  </p>

  </div>

  </div>

  </a>


  <a href="strona.htm">

  <div class="weather">
  
  <img src="foto.png">
  
  <div class="weatherdesc">

  <div class="caption">TEKST</div>

  <p>

  tekst

  </p>

  </div>

  </div>

  </a>


  <a href="strona.htm">

  <div class="weather">
  
  <img src="foto.png">
  
  <div class="weatherdesc">

  <div class="caption">TEKST</div>

  <p>

  tekst

  </p>

  </div>

  </div>

  </a>

A tutaj css:

div.weather {
  margin: 5px;
  float: left;
  width: 490px;
}

div.weather img {
  width: 480px;
  height: 350px;
}

div.weatherdesc {
  padding: 15px;
  text-align: center;
}

.main {
  padding: 40px;
  margin-top: 30px;
  max-width: 1000px;
  min-height: 100%;
  margin: auto;
  font-family: Calibri;
  background-color: white;
  box-shadow: 0px 10px 10px gainsboro;
}

Z góry dzięki za pomoc :slight_smile:

#2

Nie używaj już float, tylko grid ewentualnie flexboxa. Jeśli jednak chcesz zostać przy float, to w .main dodaj overflow: hidden.

2 polubienia
#3

dziękuję za pomoc! teraz jest ok :slight_smile: