Nie wyświetla się prawa strona elementu

Question

Witam.

Lewa strona elementu jest wyświetlona jako 20% szerokości strony, ale prawej strony brak. Chciałbym, aby prawa strona elementu też była wyświetlona jako 20% szerokości strony.

<div class="element">
</div>

.element
{
	float: left;
	margin-left: 0px;
	width: 20%;
	height: 42px;
	display: inline;
	background: #000000 url("obrazki/body_background.png");
	z-index: 3;
}

.element:last-child
{
	float: right;
	margin-right: 0px;
}

Zamiast "margin-left: 0px" i "margin-right: 0px" lepiej zapisać left: 0; i right: 0; ?

Wiecie jak to zrobić, aby fachowo to działało?

Answer 1

Wszystko nie tak !!! float oznacza pływający w obszarze zawartości swojego rodzica. last-child oznacza ostatnie dziecko. A czyim dzieckiem jest .element (już raz go ustawiłeś)

Comments

Co jest przyczyną, że u mnie nie działa (brak prawego elementu)? W kodzie wszystko jest ok?

---

Jeżeli użyłeś innych klas dla tych elementów to po co Ci pseudo klasy?

---

Jakie pseudo klasy? Masz na myśli first-child i last-child?

---

Tak pseudoklasy

---

Przy takim zapisie wyświetla już prawy element:

.header-container
{
	position: fixed;
	top: 90px;
	width: 100%;
	border-bottom: 1px solid #A29672;
	z-index: 3;
}

.header-left
{
	float: left;
	width: 23%;
	height: 43px;
	background: #000000 url("obrazki/body_background.png");
}

.header-right
{
	float: right;
	width: 23%;
	height: 43px;
	background: #000000 url("obrazki/body_background.png");
}

Widoczny jest lewy + prawy.