3spaltiges Layout - mittlerer Container feste Größe

Status
Nicht offen für weitere Antworten.
C

Crazy X

Mitglied
Wir sitzen gerade hier stundenlang an einem Problem. Die Seite sollte aus drei Containern bestehen:

<------------------- 100% Viewport ----------->

1. Container 2. Container 3. Container
flexible-Breite | 800px-Breite | flexible-Breite

<------------------- 100% Viewport ----------->

Der 2. Container soll immer horizontal zentriert sein. Wir haben jetzt alle möglichen Varianten ausprobiert, aber kriegen es einfach nicht hin :(

Vielen Dank für eure Mühen!
 
Könntest du bitte genauer beschreiben, was mit dem DIV-Zentrieren nicht funktioniert?

Noch effektiver (und hilfreicher) wäre der Source-Code, oder ein Link zum Online-Demo ;-]
 
Dies ist eine von mehreren Varianten, die wir versucht haben

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>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--

body {
  height:100%;
  padding: 0px;
  margin: 0px;
}

#wrapper {
	width:100%;
	margin:0px;
	padding:0px;
}


#links {
	width:auto%;
	float:left;
	left:0px;
	background:#aaa;
}

#inhalt {
	width:800px;
	float:left;
	background:#369;
}

#rechts {
	width:auto;
	float:left;
	right:0px;
	background:#ccc;
}
-->
</style>
</head>

<body>
	<div id="wrapper">
		<div id="links">links</div>
		<div id="inhalt">inhalt</div>
		<div id="rechts">rechts</div>
	</div>
</body>
</html>
 
Okay..., habe das #inhalt -DIV in der Seite horizontal zentriert.

Anmerkung: width: auto wird von den beiden äusseren DIVs nicht ausgeführt - daher habe ich diese Eigenschaft im StyleSheet mit /* */ auskommentiert. Leider habe ich dafür (noch) keine Lösung parat.

Hier der modifizierte Source-Code, basierend auf deinem Source-Posting:

HTML: 
<!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>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
height:100%;
padding: 0px;
margin: 0px;
}

#wrapper {
width:100%;
margin:0 auto;
padding:0px;
}

#links {
/*width:auto;*/
float:left;
background:#aaa;
}

#inhalt {
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px; /* neg. Hälfte von width:800px = horizontal zentriertes DIV */
background:#369;
}

#rechts {
/*width:auto;*/
float:right;
background:#ccc;
}
-->
</style>
</head>

<body>
        <div id="wrapper">
                <div id="links">links</div>
                <div id="inhalt">inhalt</div>
                <div id="rechts">rechts</div>
        </div>
</body>
</html>
[ Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23 ]
 
Dank dir schon mal für dein Vorschlag. Aber so hatten wir es auch schonmal (logisch nicht den gleichen Quellcode :rolleyes: )

Wenn die beiden äußeren die Breite automatisch anpassen würden wäre dies ja perfekt :(

Hab halt echt keine Lust auf Tabellen wieder umzusteigen :mad:
 
Schaut euch doch mal das Tutorial Tabellenloses Layout an. Vielleicht könnt ihr die dort beschriebene Technik der dynamischen Weitenermittlung für die beiden äusseren DIVs anwenden?

Good luck!
 
Hallo,

wenn ihr für die Container 1 und 3 auch eine feste Breite geben könntet wäre das Problem ja schnell gelöst. Ich sehe auch nicht so einen richtigen Sinn darin Container 1 und 3 flexibel zu machen.

Hauptsache ist doch, das der mittlere div Tag nicht nach unten fällt.
 
Hallo,

ja ich war auch zu faul es mal mit einer festen Breite zu testen weil ich das zufällig gefunden habe, es sieht aber so aus als ob das gehen müsste.

gruß
feh
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück