3spaltiges Layout - mittlerer Container feste Größe

[Maik]

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]

Hallo,

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

gruß
feh

 

[saila]

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]

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

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