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