✔ Bekomme mein Layout nicht hin.

[ToddurchWendy]

Hallo nach langer Zeit mal wieder.

Da ich für ein Projekt maximale Gestaltungsfreiheit über *.css gewährleisten möchte, ist es mir in diesem Falle leider nicht möglich, mein Layout mit einer Tabelle zu machen. (Ja ich weiß, dass es nicht zum guten Ton gehört! )

Leider kann ich noch so viel mit CSS rumprobieren, es möchte einfach nicht so wie ich.

Ich weiß nicht mal, ob es in diesem Falle mit CSS möglich ist, genau das Verhalten zu erreichen, dass ich mit Tabellen erreiche. der Knackpunkt ist der, dass der mittlere div-container leider nie die restliche verfügbare Breite in Pixeln bekommt.

Ich bräuchte für den mittleren container so etwas wie:

width: 100% - 400px;

Also sowohl der Linke, als auch der rechte Div haben ihre absolute Breite, und machen auch brav das, was sie sollen. Der mittlere Container ist aber immer nur so breit wie der Text...

Hier gibt es das Layout mit Tabellen.

 

[Maik]

Hi,

hier ein Lösungsansatz für ein dreispaltiges Layout, dessen mittlere Spalte den übrigen Platz zwischen den äußeren Spalten einnimmt:

<div id="wrapper">
        <div id="leftCol">...</div>
        <div id="rightCol">...</div>
        <div id="centerCol">...</div>
</div>

#leftCol {
float:left;
width:180px;
background:#ccc;
}

#rightCol {
float:right;
width:250px;
background:#ccc;
}

#centerCol {
margin:0 250px 0 180px;
background:#eee;
}

 

[ToddurchWendy]

Ich wusste garnicht, dass es in der css-Datei auf die Reihenfolge ankommt!
Ich hatte mir angewöhnt, die divs in der Reihenfolge zu schreiben wie sie vorkommen.

#leftCol {}
#rightCol {}
#centerCol {}

funktioniert einwandfrei. wo hingegen

#leftCol {}
#centerCol {}
#rightCol {}

Probleme macht.

Korrektur: Es funktioniert beides nicht, die rechte Spalte hängt jetzt unter den anderen beiden (-> klickmichichbinlink).

InTopStyle wird es mir mit der oberen Lösung ja noch eindwandfrei angezeigt, aber im Firefox und Iexplorer stimmt es dann wieder nicht!

 

[Maik]

In deinem Modell muss bei der margin-Deklaration auch die Rahmenangabe der äußeren Spalten berücksichtigt werden, da diese gemäß dem CSS-Boxmodell mit der width-Eigenschaft die Breite einer Box ergibt.

 

[ToddurchWendy]

Danke für den Hinweis, aber die Rahmen dienten ja nur der Verdeutlichung.
Ich hätte auch stattdessen eine Hintergrundfarbe nehmen können.

Es geht aber auch ohne Rahmen nicht!

Auch wenn ich experimentell alle Zwischenräume entferne, also:

* padding und margin auf 0px (Wobei ja ohnehin die einzigen Zwischenräume das margin: 10px vom Body sind)
* nur in der mittleren spalte für margin-left und -right die Breite der nachbarspalten

so wird die rechte Spalte immer rechts unterhalb der mittleren Spalte plaziert.

 

[Maik]

Dann schau bitte, in welcher Reihenfolge ich die drei Spalten im HTML-Code aufrufe und vergleiche hierzu einfach mal die Technik im CSS-Framework YAML.

 

[ToddurchWendy]

Vielen Dank, jetzt klappt es. Musste in der Tat im HTML nur zwei Divs austauschen.

html:

<div id="colOne">Headspalte</div>
<div id="colTwo">Linke Navi</div>
<div id="colThree">Rechte Navi</div>
<div id="colFour">Inhalt</div>
<div id="colFive">Footer</div>

css:

#colOne {
	width: 100%;
	margin: 0px 0px 0px 0px;
}

#colTwo {
	float: left;
	width: 180px;
}

#colThree {
	float: right;
	width: 250px;
}

#colFour {
	margin: 0px 250px 0px 180px;
}

#colFive {
	width: 100%;
}