# 3spaltiges Layout - mittlerer Container feste Größe



## Crazy X (6. Mai 2005)

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!


----------



## Maik (6. Mai 2005)

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 ;-]


----------



## Crazy X (6. Mai 2005)

Dies ist eine von mehreren Varianten, die wir versucht haben


```
<!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>
```


----------



## Maik (6. Mai 2005)

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:


```
<!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 ]


----------



## Crazy X (6. Mai 2005)

Dank dir schon mal für dein Vorschlag. Aber so hatten wir es auch schonmal (logisch nicht den gleichen Quellcode   ) 

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


----------



## Maik (6. Mai 2005)

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!


----------



## son gohan (6. Mai 2005)

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.


----------



## son gohan (6. Mai 2005)

Hallo,

ich habe ganz zufällig was tolles gefunden schaut mal da nach: http://www.stichpunkt.de/css/3-box2.html

gruß
feh


----------



## Maik (7. Mai 2005)

feh hat gesagt.:
			
		

> ich habe ganz zufällig was tolles gefunden schaut mal da nach: http://www.stichpunkt.de/css/3-box2.html



@feh: bei diesem Beispiel hat das mittlere DIV aber keine feste Breite, wie von Crazy X mit 800px vorgegeben, sondern eine relative Breite von 55%  :suspekt:


----------



## son gohan (7. Mai 2005)

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


----------



## Maik (7. Mai 2005)

feh hat gesagt.:
			
		

> 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.


Dann probier' doch mal, das mittlere DIV mit 800px zu dimensionieren und die beiden äusseren DIVs mit einer relativen/prozentualen (= dynamischen) Breite auszustatten, so dass sie immer sauber am mittleren DIV 'dranhängen', wenn man das Browserfenster vergrössert bzw. verkleinert ...  ;-]


----------



## son gohan (7. Mai 2005)

Hallo,

geht wohl nicht, naja, was soll das leben geht weiter. Aber ich denke dir wäre es sonst auch eingefallen.  

gruß
feh


----------



## saila (8. Mai 2005)

Also wie folgt:

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

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

#rechts {
/*width:auto;*/
background:#ccc;
}

Das ist die eine Möglichkeit um das zu bewirken, was du möchtest. Wenn du allerdings deine festen größen beibehalten willst, dann musst du alle Boxen absolut positionieren und das am besten mit z-index.


----------



## Maik (8. Mai 2005)

@Crazy X: 

Dank feh's Demo-Link, dessen CSS-Modell ich gestern noch verworfen hatte, habe ich jetzt die Lösung gefunden. Die beiden äusseren (links und rechts floatenden) DIVs erhalten eine prozentuale Weitenangabe, die kleiner als 50% ist. So entsteht zwischen ihnen in der Bildschirmmitte ein (Sicherheits-) Abstand. Das mittlere (horizontal zentrierte) DIV, das ja absolut positioniert ist, überdeckt die beiden floatenden DIVs   ;-]

Modifizierter CSS-Code, basierend auf meinem Source-Posting vom 06.05.2005:

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

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

#links {
width: 49%; /* kleiner als 50% */
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: 49%; /* kleiner als 50% */
float:right;
background:#ccc;
text-align: right;
}
```
 [ Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23 ]


@saila: 

Hast du deine fragwürdigen StyleSheet-Angaben auch mal in einem der bekannten Browsers getestet? 

Das Ergebnis siehst du in diesem repräsentativen Screenshot (600*200px, M 1:1): das linke DIV *#links* wird vom mittleren DIV *#inhalt* um 400px nach links verschoben :suspekt:


----------



## saila (9. Mai 2005)

Hi michaelsinterface,

nein habe ich nicht. Ich habe lediglich die Vorgabe um den Punkt ergänzt / verändert, welcher zur Disposition stand. Deswegen mag es auch als fragwürdig erscheinen.

Andere Frage. Wenn du den CSS-Durchblick hast, kannst du mir sicherlich da weiter helfen:
http://www.tutorials.de/tutorials203959.html


----------

