✔ Dreispaltiges Layout (rel. und feste Werte)

Status
Nicht offen für weitere Antworten.
J

jonasduever

Grünschnabel
Hallo,

ich bin bei der Umstellung von Tabellenlayout auf CSS-Layout (zumindest größtenteils) auf ein Problem gestoßen, dass mir ziemlich komisch vorkommt, da es ziemlich simpel klingt.

Ich möchte ganz einfach 3 Spalten erzeugen, wobei jedoch (und das ist eigentlich die Schwierigkeit) die beiden äußeren Spalten jeweils feste Breiten haben sollen, die mittlere jedoch eine variable Breite (die sich mit der Fenstergröße ändert). Alle zusammen sollten natürlich die gesamte Fensterbreite einnehmen, also 100%.

Ich habe für dieses Problem auch per Google irgendwie keine Lösungen gefunden. Andere dreispaltige Layouts wie zum Beispiel "CSS4YOU - Dreispaltiges Layout, 100% breit" sind immer komplett mit relativen Prozentangaben versehen, was bei meinem Design, dass auch weiterhin so aussehen soll, wie es mit Tabellen der Fall ist, jedoch nicht möglich ist.

Was muss ich also als CSS-Definition für die Breitenangabe des mittleren Divs verwenden?

Ich hoffe, es gibt eine einfache Lösung bzw überhaupt eine Lösung ;) (es kommt mir so vor, als wäre dies ein ziemlich einfaches Problem, was man leicht per Suchfunktion finden könnte, habe ich aber nicht gefunden)

Jonas
 
Zuletzt bearbeitet:
Das sind die Zutaten für ein dreispaltiges Layout, in dem die äußeren Spalten #leftCol und #rightCol eine feste Breite besitzen und sich für die mittlere Spalte #centerCol eine variable Breite ergibt:

Code: 
div#leftCol {
float: left;
width: 200px;
background: #cacaca;
}

div#rightCol {
float: right;
width: 200px;
background: #cacaca;
}

div#centerCol {
margin: 0 200px;
background: #eaeaea;
}

Und so lautet das Markup, bei dem die Reihenfolge der DIVs zu beachten ist:

Code: 
<body>
    <div id="leftCol">leftCol</div>
    <div id="rightCol">rightCol</div>
    <div id="centerCol">centerCol</div>
</body>
Und zu guter letzt der komplette Quellcode:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
}

div#leftCol {
float: left;
width: 200px;
background: #cacaca;
}

div#rightCol {
float: right;
width: 200px;
background: #cacaca;
}

div#centerCol {
margin: 0 200px;
background: #eaeaea;
}
-->
</style>

</head>
<body>
    <div id="leftCol">leftCol</div>
    <div id="rightCol">rightCol</div>
    <div id="centerCol">centerCol</div>
</body>
</html>
 
@suye: Danke für die Links ;)

Maik hat gesagt.:
Und so lautet das Markup, bei dem die Reihenfolge der DIVs zu beachten ist:

Code: 
<body>
    <div id="leftCol">leftCol</div>
    <div id="rightCol">rightCol</div>
    <div id="centerCol">centerCol</div>
</body>
Zum Vergrößern anklicken....
Ah, das war anscheinend das, was ich in meinen Versuchen nicht beachtet hatte.

Vielen Dank für die schnelle Hilfe (sogar nachts)! ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück