• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Float-problem

Status
Für weitere Antworten geschlossen.

Anonymous

Neues Mitglied
Hallo,

ich habe ein Problem. Und zwar habe ich mit divs vor 3 Bereiche nebeneinander zu platzieren.

Code:
.header {
    width:100%;
	height:25%;
	background-color:#FFFFFF;
	border:1px solid #000000;
}

.navigation {
    width:15%;
	height:75%;
	background-color:#FFFFFF;
	border:1px solid #000000;
	float:left;
}

.content {
    width:70%;
	height:75%;
	background-color:#FFFFFF;
	border:1px solid #000000;
	float:left;
}

Code:
<div class="header"></div>
<div class="navigation"></div>
<div class="content"></div>
<div class="navigation"></div>

Jetzt wird der linke Navigationsteil und der Content-bereich nebeneinander angezeigt. Allerdings der rechte Navigationsteil wird untendrunter angezeigt. Wieso?

100% sind möglich
15% + 70% + 15% = 100%

Wieso funktioniert das Ganze also nicht?
 
Werbung:
sowas macht man mit tabellen!

wenn das nicht willst mach es mit absoluten positionen, ist aber eigentlich nicht das optimum
hier ein bsp. ist aber von denn werten her nicht richtig berechnet, nur ueberschlagen

Code:
.header {
	width:100%;
	height:100px;
	background-color:#FFFFFF;
	border:1px solid #000000;
	position: absolute;
	left: 5px;
	top: 5px;
	right: 5px;
}

.navigation {
	width:15%;
	height:75%;
	background-color:#FFFFFF;
	border:1px solid #000000;
	float:left;
	position: absolute;
	top: 110px;
	left: 5px;
}

.navigation2 {
	width:15%;
	height:75%;
	background-color:#FFFFFF;
	border:1px solid #000000;
	float:left;
	position: absolute;
	top: 110px;
	right: 5px;
}

.content {
	width:70%;
	height:75%;
	background-color:#FFFFFF;
	border:1px solid #000000;
	float:left;
	left: 16%;
	position: absolute;
	top: 110px;
}
</style>

<body>
<div class="header"></div>
<div class="navigation"></div>
<div class="content"></div>
<div class="navigation2"></div>
</body
 
Werbung:
Status
Für weitere Antworten geschlossen.
Zurück
Oben