Problem mit Positionierung

[Christian Seiler]

Hallo Philipp,

<div id="head">
  <p>head</p>
</div>

<div id="main">
  <div id="nav">
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
  </div>
  <div id="content">
    <p>Text</p>
  </div>
  <div id="side">
    <p>side</p>
  </div>
</div>

<div id="foot">
  <p>foot</p>
</div>

Also: Das <div id="main"> kannst Du weglassen. Desweiteren musst Du - um Dich jetzt nicht endlos zu verkrampfen, die Reihenfolge ändern:

<div id="nav">...</div>
<div id="side">...</div>
<div id="content">...</div>

Dem #nav verpasst Du float:left; und eine Breite. (z.B. 120px oder 10em oder so etwas) Dem #side verpasst Du float:right; und auch eine Breite. Dem #content verpasst Du margin-left:"Breite von #nav + ein bisschen was"; und margin-right:"Breite von #side + ein bisschen was";

Dem #foot verpasst Du noch ein clear:both; und die Sache ist erledigt.

Optimal wärs, wenn die drei divs _immer_ nebeneinander angezeigt werden und wenn die Fensterbreite unter x Pixel ist, man zur seite scrollen muss.

body { min-width: "Minimale Breite der Seite"; }

Allerdings kann das der IE nicht. Dafür nimmt er automatisch die Mindestbreite an; allerdings gibt es da einen unschönen Effekt:

Normal:

verfügbare Anzeigefläche
<-------------------------------------->

+-------+----------------------+-------+
| #nav  | #content             | #side |
|       | inhalt               |       |
|       | inhalt etwas breiter |       |
|       |                      |       |
+-------+                      |       |
        |                      +-------+
        |                      |
        +----------------------+

Zu klein:

verfügbare Anzeigefläche
<--------------------------->

+-------+----------------------+-------+
| #nav  | #content             | #side |
|       | inhalt               |       |
|       |                      |       |
|       |                      |       |
+-------+                      |       |
        |                      +-------+
        | inhalt etwas breiter |
        |                      |
        +----------------------+

Meines Wissens kann man das nicht wirklich umgehen.

Viele Grüße,
Christian