Ustawienie divów obok siebie

Question

Cześć! Od wczoraj męczę się z jednym kodem i nie mam pojęcia jak ustawić w odpowiedniej kolejności divy.

Chodzi o to, żeby dwa pierwsze stały obok siebie, a pod nimi dwa pozostałe, tworząc tak jakby 'kwadrat'. Ma to wyglądać mniej-więcej tak: http://i.imgur.com/vpPPNon.png

Próbowałam już wielu kodów z internetu i z tego forum, ale za każdym razem, gdy już uda mi się idealnie ułożyć jedną linię, to z kolei ta druga się rozjeżdża (i na odwrót).

Dopiero się uczę, więc proszę o wyrozumiałość :)

<div class="box2">
    <div class="avatar">
      <img src="http://i.imgur.com/BQmlB9R.png">
    </div>
    <div class="icons">
  <div class="addfr">
   <a href="#" target="_blank" class="iconslink"><img src="http://i.imgur.com/go6ikBV.png"></a>
   </div>
   <div class="smsg">
   <a href="#" target="_blank" class="iconslink"><img src="http://i.imgur.com/N5JF3sh.png"></a>
   </div>
   <div class="sgift">
  <a href="#" target="_blank" class="iconslink"><img src="http://i.imgur.com/C1mOvBU.png"></a>
   </div>
   <div class="buser">
  <a href="#" target="_blank" class="iconslink"><img src="http://i.imgur.com/k6SG0Q3.png"></a>
   </div>
    </div>
  </div>

.avatar {
  margin: 0px 0px -10px 60px;
  float: left;
}

.addfr {
  margin: 145px 0px 15px 30px;
  float: left;
  white-space: nowrap;
}

.smsg {
  margin: 145px 0px 15px 14px;
  display: inline-block;
  white-space: normal;
}

.sgift {
  white-space: nowrap;
}
.buser {
  display: inline-block;
  white-space: normal;
}

 

Comments

Jeżeli znasz szerokość tych ikon to wystarczy do rodzica dodać szerokość odpowiadającą dwóm ikonom, czyli załóżmy taką strukturę w htmlu:

div.icons
    a.ico
    a.ico
    a.ico
    a.ico

Teraz wiemy, że nasza ikona ma 50px i jej margin to 5px z każdej strony w css wystarczy, że dodamy do klasy .icons - width: 120px a do .ico na przykład display: inline-block. 

Dzięki inline-block nasze ikonki będą wyświetlane obok siebie (a nie pod sobą) natomiast ograniczenie rodzicowi szerokości sprawi, że ikony które się nie zmieściły "zejdą" niżej. 120px wynika natomiast z tego że chcemy dwie ikonki, które mają 50px szerokości, czyli 100px, ale mają też marginesy 5px (lewy + prawy = 10px) czyli mamy razem 120px

Oprócz tego sposobu, który tu opisałem jest dużo innych rozwiązań tego problemu i wszystko zależy od strony i tego jak ją budujesz 

edit // 
z racji tego, że przeglądarki dodają domyślnie przy inline-block odstępy trzeba zwiększyć to 120px o 4px, albo zastąpić inline-block przez float:left tylko wtedy trzeba pamiętać o stosownym clearfixie

 

---

Dzięki za pomoc! Udało mi się to naprawić i w przyszłości będę wiedziała jak się za to zabrać ^^

Answer 1

Próbowałam już wielu kodów z internetu i z tego forum

A próbowałaś może zrozumieć? Bo po kopiowaniu bez zrozumienia właśnie takie problemy wychodzą
Dlaczego do .addfr akurat dodałaś float: left ?
Zelent tłumaczy takie podstawy w jednym z filmików - Kurs HTML odc. 2
Możesz też poczytać, czym jest flexbox i za jego pomocą zbudować takie coś.

ps. miałam chęć podać Ci gotowy kod, ale stwierdziłam, że lepiej jak sama trochę pokombinujesz