Float:left float:right

Question

Mam efekt tak jak na obrazku pierwszym, a chciałbym jak na obrazku drugim . Proszę o pomoc

Comments

Mógłbyś pokazać kod?

---

Wszystko już działa. Dzięki

---

bardziej chodziło mi o html

---

Wszystko działa

---

Generalnie zadziała jeżeli ustawisz jednego np diva na width 50% i drugiego również na 50%. Ciekawszym rozwiązaniem, jak wspomniał kolega poniżej jest użycie flexboxa, którego nauczysz się tutaj: http://flexboxfroggy.com/#pl

Answer 1

Powinno zadziałać jak wrzucisz obydwa ul do jednego div'a

Answer 2

Super sprawdzi się tutaj rozwiązanie z flexem

Comments

To znaczy? Proszę jaśniej

---

Możesz poczytać o flex , oraz masz poniżej link do przykładu

https://jsbin.com/kezijudiko/edit?css,output

 

Answer 3

A ja się tak zastanawiam, jaki jest sens ustawienia:

float: left;

i jednocześnie:

clear: left;

To w końcu chcesz aby twój element #left_nav  był opływany z lewej, czy nie? Albo jedno, albo drugie, ale oba na raz to nie pujdzie.

Comments

Chce aby elementy wyświetlały się pod spodem siebie wszystkie, aby miały float:left a zaraz były jedna pod drugą

---

O coś takiego https://codepen.io/anon/pen/wJJMWg ci chodzi?

---

Dokładnie

Answer 4

ja proponuje ci wrzucić tą drugą listę w jednego diva i jedną liste dać float:left a drugą float:right bo to co ty robisz to dwa odzielne bloki, a jesli koniecznie chcesz zrobić tak do ten drugi div zamien na span i zadziała

Comments

Dzięki wszystkim. Wrzuciłem wszystkie divy z lewej do diva oraz diva z prawej do jednego diva. Teraz działa. Dzięki za pomoc. Pozdrawiam

Answer 5

Nie dotykaj tego z float'em. Flexbox tutaj pieknie się sprawdzi :)

<div class="container">
  <div class="side">
     <p>1</p>
     <p>2</p>
     <p>3</p>
  </div>
  <div class="side">
     <p>1</p>
     <p>2</p>
     <p>3</p>
  </div>
</div>

 

.container{
   width: 100%;
   display: flex;
   justify-content: space-between;
}

.side{ 
   width: // twoja szerokość lub można się pobawić z flex: _ _ _;
}