3 Boxen nebeneinander

Roux · #1 (**permalink**) 15.07.2008, 11:36

Hi!
Ich möchte folgende Vorlage tabellenlos umsetzen: *klick*
Den Anfang hab ich im Moment so gelöst:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

<style type="text/css">
body {
	background: #000000;
	color:#FFFFFF;
}

#page {
	width:90%;
	height:500px;
	margin:auto;
}

.navi_links {
	background:url(images/navi_links.png) top left no-repeat;
	float:left;
	width:67px;
	height:62px;
	padding-left:67px;
	padding-top:10px;
}

.navi {
	background:url(images/navi.png) top left repeat-x;
	float:left;
	width:100%;
}

.navi_rechts {
	background:url(images/navi_rechts.png) top left no-repeat;
	float:right;
	width:67px;
	height:62px;
}
</style>

</head>

<body>

<div id="page">	

	
<div class="navi_c">

	<div class="navi">
		<div class="navi_links">test</div>
		<div class="navi_rechts"></div>
	</div>

</div>

</div>

</body>
</html>

Oder live: *klick*

Das Problem: Ich muss den den Inhalt in "navi_links" schreiben. Besser möchte ich aber, dass ich ihn in "navi" schreibe. Wenn ich die Verschachtelung aufhebe, und alle 3 Boxen nebeneinander platziere, habe ich da Problem, dass ich der mittleren Box eine Höhe und Breite zuweisen muss, das will ich aber nicht, da es sich selbst auf jede Auflösung anpassen soll. Wenn ich es so lasse und den Text einfach in die mittlere schreibe, rückt er die anderen Boxen nach unten.

Jemand ne Idee?

Danke,
Roux

Scheppertreiber · #2 (**permalink**) 15.07.2008, 12:41

Mach 3 divs:

eine mit float:left links anpappen, eine mit float:right rechts anpappen,
dann die dritte div, die wird dann der Platz in der Mitte. Den jeweils gefloateten
divs muß Du mit width:20% oder so eine feste Breite geben.

Code:

<div style="float:left; width: 20%;">Links</div>
<div style="float:right; width: 20%;">Rechts</div>
<div>Mitte</div>

aboleo · #3 (**permalink**) 15.07.2008, 12:56

Sehr gut veranschaulicht, damit man das ganze auch versteht und ein visuelles Lernbeispiel hat -> stichpunkt.de - Drei Spalten nebeneinander ohne Tabellen

Roux · #4 (**permalink**) 15.07.2008, 14:20

Danke euch erstmal, ich schau mal.

Roux

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Boxen nebeneinander untereinander	Muckelfloh	CSS	1	14.12.2009 18:56
2 CSS Boxen nebeneinander positionieren	-seppel-	CSS	3	24.06.2008 23:45
2 Boxen nebeneinander.. oder so ähnlich..	mickyratte	CSS	2	02.04.2008 15:26
2 Boxen nebeneinander ?	Ivory	CSS	3	08.10.2006 14:41
Positionierung Boxen nebeneinander	Pointer	CSS	3	14.07.2006 21:55