Menu lewe content i menu prawe

Question

Hej,

Jakiego kodu trzeba użyć, aby były obok siebie 3 divy? Mój obecny sprawia, że na pierwszy rzut oka wszystko ok, ale gdy się doda dużo tekstu do contentu, i zjedzie się poniżej strony, to menu lewe przeskakuje na środek na górze i zanika po przescrolowaniu, a cały tekst przesuwa się w lewo, a menu prawe niby zostaje tam na miejscu ale widać, że coś z nim przeskoczyło.

 

z css:

.menulewo
{
    height: 350px;
    width: 190px;
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 20px;
    margin-left: 10px;
}

.content
{
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-top: 10px;
    min-height: 360px;
    float: left;
    font-size: 60px;
}

.menuprawo
{
    height: 350px;
    width: 160px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 40px;
    margin-right: 20px;
    float: right;
}

kolejny div stopka ma clear:both

 

Pomocy:)

Answer 1

Nie używaj float'a. Zmień kod i użyj flexboxa :)

Answer 2

W klasie .menuprawo daj float: left;

Comments

nic to nie zmieniło niestety ;/

Answer 3

a dobra, umknelo mi clear both po nawigacji, juz działa. sorki

Answer 4

Dwie (chyba najpopularniejsze) metody układania elementów obok siebie to:
Float:left
Display:inline-block

Wykorzystanie obu metod polega na nadaniu każdemu elementowi, z tych które mają znaleźć się obok siebie, własności odpowiednio: "float:left" lub "display:inline-block".

Każda z metod ma jednak swoje wady (w skrócie):
Float-left wymaga wykorzystania dodatkowego div'a, któremu należy nadać właściwość "clear:both".
W przypadku display:inline-block należy poradzić sobie ze znakami białymi (aby między divami nie występowały przerwy).

Szczegółowe porównanie i więcej informacji: http://pasja-informatyki.pl/wp-content/uploads/2016/10/programowanie-webowe-odc-2.pdf

Inne stosunkowo nowe metody układania elementów obok siebie to:
Flexbox
Grid

Nie są to jednak metody konkurencyjne - mogą, a nawet powinny być używane razem.

Flexbox jest kompatybilny z większością przeglądarek internetowych.
Jego wykorzystanie opiera się głównie na nadaniu div'owi będącemu "pojemnikiem" dla innych div'ów właściwości "display:flex", potem zależnie od uznania i potrzeby ustawienia takich własności jak np.flex (dla elementów), flex-flow (dla pojemnika), ...

Grid natomiast jest kompatybilny z nowymi wersjami większości popularnych przeglądarek, ale nie jest kompatybilny z wieloma starszymi przeglądarkami, niektórymi mobilnymi itp. Budową lekko przypomina tabele - również występują wiersze i kolumny.

Więcej informacji:
https://developers.google.com/web/updates/2017/01/css-grid
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
https://www.w3.org/TR/css-grid-1/#intro
https://www.w3.org/TR/css-flexbox-1/#box-model