✔ Dreispaltiges Layout

Status
Nicht offen für weitere Antworten.
versuch13

versuch13

Erfahrenes Mitglied
Hallo, ich habe ein Problem damit ein anständiges drei spaltiges Layout zu machen.
Es sollte sich so verhalten, dass die linke und rechte Spalte eine feste breite haben, und die mittlere flexibel ist bis zu einer mindest weite.
Allerdings schiebt sich die rechte Spalte dann beim verkleinern des Browsers immer über die mittlere und linke Spalte.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 <head>
  <title>Test</title>
  <style type="text/css">
  * {
   margin:0;
   padding:0;
  }
  /* left */
  div#left {
   width:230px;
   position:absolute;
   top:0;
   left:0;
   background:#999;
  }
  /* center */
  div#center {
   margin:0 230px 0 230px;
   font-size:0.8em;
   min-width:450px;
   background:#666;
  }
  /* right*/
  div#right {
   width:230px;
   position:absolute;
   top:0px;
   right:0px;
  }
  </style>
 </head>
 <body>
  <!-- linke Spalte -->
  <div id="left">
   links
  </div>
  <!-- mittlere Spalte -->
  <div id="center">
   mitte
  </div>
  <!-- rechte Spalte -->
  <div id="right">
   rechts
  </div>
 </body>
</html>

Vielleicht hat ja jemand eine Lösung? Danke.
 
Hi,

hier mein Lösungsvorschlag:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 <head>
  <title>Test</title>
  <style type="text/css">
  * {
   margin:0;
   padding:0;
  }

  /* wrapper */
  div#wrapper {
  min-width: 890px; /* 2*230px + 430px = 890px */
  }

  /* min-width -Workaround für IE6 */
  * html .minwidth {border-left:890px solid #fff; position:relative; float:left; z-index:1;}
  * html .container {margin-left:-890px; position:relative; float:left; z-index:2;}

  /* left */
  div#left {
   width:230px;
   float:left;
   background:#999;
  }
  
  /* center */
  div#center {
   margin:0 230px 0 230px;
   font-size:0.8em;
   background:#666;
  }

  /* right */
  div#right {
   width:230px;
   float:right;
   background:#999;
  }
  </style>

 </head>
 <body>
 <div id="wrapper">
   <div class="minwidth">
     <div class="container">

        <!-- linke Spalte -->
        <div id="left">
        links
        </div>
        <!-- rechte Spalte -->
        <div id="right">
        rechts
        </div>
        <!-- mittlere Spalte -->
        <div id="center">
        mitte
        </div>

      </div>
    </div>
 </div>
 </body>
</html>
 
He, danke! Funktioniert bestens. Aber ich verstehe den Workaround nicht
ganz, würdest du das bitte nochmal kurz erklären? Danke.
 
Klar, kein Problem ;)

Der IE6 unterstützt die min-width-Eigenschaft nicht, weshalb ich zu diesem Workaround von Stu Nicholls gegriffen habe -> http://www.cssplay.co.uk/boxes/width2.html.

Hierbei werden zwei ineinander verschachtelte floatende Boxen eingebunden.

Die erste erhält entsprechend der gewünschten Mindestbreite einen linken Rahmen und die zweite Box wird um dieses Maß mit einem negativen margin-left-Wert über den weissen Rahmen geschoben.

That's it. :)
 
michaelsinterface hat gesagt.:
Klar, kein Problem ;)

Der IE6 unterstützt die min-width-Eigenschaft nicht, weshalb ich zu diesem Workaround von Stu Nicholls gegriffen habe -> http://www.cssplay.co.uk/boxes/width2.html.

Hierbei werden zwei verschachtelte floatende Boxen eingebunden.

Die erste erhält entsprechend der gewünschten Mindestbreite einen linken Rahmen und die zweite Box wird um dieses Maß mit einem negativen margin-left-Wert über den weissen Rahmen geschoben.

That's it. :)
Zum Vergrößern anklicken....


Ok, dass war mir schon klar, nur was bewirkt es? Irgendwie möchte ich immer alles ganz genau wissen.
Also was bewirkt das Element mit der Klasse .minwidth und was bewirkt das Element mit der Klasse .container?

HTML: 
<div class="minwidth"></div>

Täuscht also dem Browser eine mindest Breite vor? Ohne diesem wären dem IE
insgesamt nur 2*230px Breite gegeben und die mindest breite für #center wäre
demnach nicht gegeben? Sehe ich richtig oder?

Aber was bewirkt .container?

Edit: Ok, also .container sorgt einfach nur dafür ,dass weil durch .minwidth ja alles
nach rechts verschoben wäre die Elemente innerhalb von .minwidth wieder nach links
versetzt werden?

Danke.
 
Zuletzt bearbeitet:
Dein Codebeispiel kommt mir gerade recht. Den Workaround hab ich gleich in mein neues Design eingebaut. Meine Versuche diesen Workaround von Stu einzurichten, sind immer fehlgeschlagen ;)
Herzlichen Dank dafür
 
Die Rahmen-Formatierung border-left:890px solid #fff bewirkt, dass sich die Box .minwidth nicht schmäler als ihr linker Rahmen zusammenschieben lässt.

Und wie du richtig erkannt hast, wird das DIV .container mit dem gleichwertigen, aber negativen margin-left-Wert und durch eine höhere Schichtpositionierung über den Rahmen gelegt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück