✔ 3 Spalten 100% breit.

  • Themenstarter Themenstarter sal0815
  • Beginndatum Beginndatum
S

sal0815

Hallo,
ich möchte einee Seite bauen, die aus 3 Zeilen - Kopf , Content, Fuß - und im Content aus 2 Spalten beseht. die äußeren Spalten sollen eine feste Breite haben und die mittlere soll den restlichen Platz voll ausfüllen (100%).
Nun habe ich in meiner CSS Datei eingegeben:

html, body
{
margin-left:auto;
margin-right:auto;
}
#head
{
clear:both;
width:100%;
height:50px;
background-color:#060;
}
#row-l
{
float:left;
background-color:#F00;
width:200px;
height:200px;
padding: 10px;
}
#row-c
{
float:left;
background-color:#9f0;
height:200px;
width:100%;
}
#row-r
{
float:left;
background-color:#F00;
width:200px;
height:200px;
padding: 10px;
}


entsprechend die html:

<body>
<div id="head"></div>
<div id="row-l"></div>
<div id="row-c"></div>
<div id="row-r"></div>
</body>

Die Boxen werden nun aber durch die Breite der mittleren Box umgebrochen. wie vermeide ich das?
 
Hi,

dein Vorhaben wird auf diese Weise umgesetzt:

HTML: 
<body>
<div id="head"></div>
<div id="row-l"></div>
<div id="row-r"></div>
<div id="row-c"></div> <!-- Der mittlere Spaltenblock wird zuletzt genannt -->
</body>
CSS: 
#row-l
{
float:left;
background-color:#F00;
width:200px;
height:200px;
padding: 10px;
}
#row-c
{
margin:0 220px; /* Der mittlere Spaltenblock umfliesst die Äußeren entsprechend ihrer Breite (width + 2*padding), und füllt so die verfügbare Breite im Viewport aus  */
background-color:#9f0;
height:200px;
}
#row-r
{
float:right; /* anstelle von float:left */
background-color:#F00;
width:200px;
height:200px;
padding: 10px;
}

In meiner Signatur findest du auch zwei CSS-Tutorials, die diese Technik vorsellen, halt bei einem zentierten Layout mt fester Breite.

mfg Maik
 
Danke, das hab ich auch schon probiert, Ergebnis: Wenn die mittlere Spallte mit Inhalt (Text) gefüllt wird, wird die letzte Spalte wieder umgebrochen. Why?
 
Bei mir wird der rechte Spaltenblock zwar nicht umgebrochen, aber dann bette die Blöcke in ein Elternelement ein, und richte für dieses eine Mindestbreite ein:

HTML: 
<div id="wrapper">
    <div id="head"></div>
    <div id="row-l"></div>
    <div id="row-r"></div>
    <div id="row-c"></div> <!-- Der mittlere Spaltenblock wird zuletzt genannt -->
</div>
CSS: 
#wrapper {
min-width:800px; /* Das Maß der Mindestbreite ist von mir frei gewählt */
}

mfg Maik
 
Sorry, hab den Fehler gefunden. Hab deine Anweisung in der html-Datei übersehen: Mittlere Spalte zuletzt.
Vielen, vielen Dank.
 
Das wäre nämlich meine nächste Frage gewesen, ob du meinen Quellcode auch korrekt übernommen hast.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück