Często spotykamy się z problemem pozycjonowania w poziomie czyli ustawienia dwóch dowolnych elementów obok siebie.
Aby to zrobić tworzymy dokument HTML w którym tworzymy 2 divy.
w skrócie to wyglądałoby tak:
<html>
<body>
<div id="lewy"></div>
<div id="prawy"></div>
</body>
</html>
jak zauważyłeś nadałem im nazwy lewy i prawy żeby można było się łatwiej do nich odnieść.
teraz tworzymy plik CSS w którym sekcja lewy będzie miała np wysokość 100px i szerokość 200px; i takich samych rozmiarów będzie sekcja prawy.
#lewy
{
width:200px;
height:100px;
}
#prawy
{
width:200px;
height:100px;
}
każdy div jest już automatycznie elementem blokowym tzn że jest on umieszczany bezpośrednio pod drugim divem. więc nie musimy używać komendy display:block;
Teraz już stworzę to o czym była mowa czyli wypozycjonuje. Posłużę się poleceniem float i cały kod CSS będzie wyglądał tak:
#lewy
{
width:200px;
height:100px;
float:left;
}
#prawy
{
width:200px;
height:100px;
float:right;
}
później można jeszcze je ustawiać dodając margin lub padding.
Listing