Wyrównanie do lewego marginesu

pytanie zadane 30 maja 2016 w HTML i CSS przez Barttyyy Gaduła (4,680 p.)

Witam, męczę się już dobre pół godziny i próbuje na wszystkie sposoby sprawić, aby słowa niżej na zdjęciu nie były po lewej stronie a po prawej, próbowałem wszędzie wpisać margin-right oraz text-align: right; i nie daje to skutku

oto kod:

<body>
	<div id="container">
		<div id="kosz">
			<div class="option">Home</div>
			<div class="option">Oferta</div>
			<div class="option">Cennik</div>
			<div class="option">Galeria</div>
			<div class="option">Kontakt</div>
	</div>
		
</body>

body
{
	background-color:  #0d0d0d;
	margin: 0;
	font-family: 'Lato', sans-serif;
}
#container
{
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	width:  100%;
}
#kosz
{
	padding: 10px;
	margin-right: 100px;
}
.option
{
	float: left;
	min-width: 50px;
	height: 25px;
	font-size: 18px;
	padding: 10px;
	opacity: 0.8;
	color: #ffffff;
	font-family: 'Archivo Narrow', sans-serif;
	letter-spacing: 2px;
}

czy oprócz podania dobrego kodu, mógłby ktoś mi podać jakiś poradnik dotyczący rozmieszczania tekstu i obrazków na stronie?

Pozdrawiam ;)

komentarz 30 maja 2016 przez Barttyyy Gaduła (4,680 p.)

Dzieki, float zadziałał, nie znacie może poradników o pozycjonowaniu? :D

3 odpowiedzi

odpowiedź 30 maja 2016 przez mitelak Pasjonat (23,330 p.)
wybrane 30 maja 2016 przez Barttyyy

Najlepsza

Po pierwsze nie używaj do stylowania ID tylko CLASS :) czyli #kosz na .kosz tak samo container. A nie możesz przyrównać do prawej przez float: left. Popróbuj coś z tym zrobić :) Poza tym nawigacja zwyczajowo jest listą linków, więc te divy to tak sobie tu pasują.

edit// możesz zrobić to na przykład tak http://codepen.io/mitelak/pen/EyxJjg
flex box fajnie się nadaje do tworzenia tego typu rzeczy nie bawiąc się float
Ogólnie rzecz biorąc to Twój container i tak nic nie robi. Zamieniłem kosz na tag <nav> i w nim umieściłem linki już nie jako divy tylko lista hiperłączy :) Myślę że powinieneś się połapać, a jak nie to pytaj. Tutaj jeszcze dorzucam opisanego flexboxa fajnie https://css-tricks.com/snippets/css/a-guide-to-flexbox/