2 innere DIVs (nebeneinander) sollen äußeren aufziehen

[Sam]

Hallo,

ich habe einen äußeren DIV-Container (mainright) in dem nebeneinander zwei DIVs sind (contentlinks und contentrechts).
Damit die DIVs nebeneinander positioniert sind, habe ich dem linken ein float:left gegeben. Das Problem ist nun, dass sich der äußere zwar mit dem Inhalt des rechten Containers anpasst, aber nicht mit dem des linken Containers, wohl wegen dem float:left.
Habe dem äußeren schon ein overflow:auto gegeben und damit klappt es auch im Firefox, aber nicht im IE6.
Auf position:absolute kann ich das mainright auch nicht setzen, weil's mir sonst im IE rechts zu breit wird und ich aber eine von der Fenstergröße variable Breite haben möchte.
Dann hatte ich hier eine Lösung mit einem Breaker gefunden, aber die funktioniert auch nicht, denn dann wird mir das DIV im IE wieder rum zu weit aufgezogen, nämlich so weit wie das bgleft bzw. das menu und nicht wie das contentlinks.
Habe folgendes versucht:

<div id="bgleft">
  <div id="menu">
    <p>hier ist das menu</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </div>
</div>

<div id="bgright">
  <div id="mainright">
    <div id="contentlinks">hier steht der linke content</div>
    <div id="contentrechts">und hier der rechte content</div>
    <div id="breaker"></div>
  </div>
</div>

#bgleft {
float:left;
width:190px;
}

#menu {
float:left;
width:190px;
}

#bgright {
margin-left:200px;
}

#mainright {
overflow:auto;
}

#contentrechts {
margin-left:160px;
text-align:justify;
}

#contentlinks {
float:left;
width:150px;
}

#breaker {
clear:both;
height:1px;
overflow:hidden;
}

Habt Ihr eine Idee?

Gruß
Sam

[Antipitch]

Hi Sam,

1. Du hast jeweils ein überflüssiges umgebendes div im linken Menü Bereich und im rechten.

2. Dein Menü sollte eine Liste (<ul>) sein, d.h. du brauchst dort eigentlich gar kein <div>

3. Aufziehproblem: alle overflow Angaben raus, den clearer auch und dafür das übergeordnete rechte div auch nach links floaten.

Gruß
Antipitch

[Sam]

Hey Antipitch,

danke für Deine Hilfe.
Hab's jetzt mal versucht anders umzusetzen, aber da stoß ich auch schon wieder auf Probleme.
Hier mal eine Skizze:
http://de.geocities.com/sams.testspace/div.jpg
Das funktioniert so erstmal alles soweit, aber wenn im #contentrechts ein etwas längerer Inhalt steht, dann springt das komplette #mainright unters #menu.
Wenn ich das float:left im #mainright rausnehme, dann springt's nicht um, aber dann wird das #mainright auch nicht in der Größe der beiden inneren DIVs (contentlinks und contentrechts) angepasst.
Ich zweifel langsam echt an meinem Verstand ;-)

Gruß
Sam

[Antipitch]

Hi Sam,

seh ich das richtig, dass das ganze Layout eine feste Breite haben soll und alle einzelnen divs auch? Dann floate einfach das rechte content div auch nach links und gib ihm die Breite, die es haben soll. #main braucht nicht unbedingt eine Breitenangabe. In der Höhe wird #main dann von den beiden inneren divs aufgespannt und ansonsten sind alle Höhen unabhängig.

Gruß
Antipitch

[Sam]

Hi,

nicht wirklich eine feste Breite. #menu und #contentlinks haben eine feste Breite. Der Rest als quasi der #contentrechts soll dann immer bis nach rechts gehen und das dahinterliegende main halt auch dementsprechend.

Gruß
Sam

[Antipitch]

Hi Sam,

nicht wirklich eine feste Breite. #menu und #contentlinks haben eine feste Breite. Der Rest als quasi der #contentrechts soll dann immer bis nach rechts gehen und das dahinterliegende main halt auch dementsprechend.

das ist natürlich nochmal'n extra Schwierigkeitsgrad (gleiche Höhen simulieren und 2x100% Breite).

Probier mal das hier (nicht auf Mac getestet):

* {
margin: 0;
padding: 0;
border: 0 none;
}
body {
margin-top:10px;
padding-left: 240px;
padding-right: 10px;
}
#left {
margin-left:-230px !important;
margin-left:-115px; /* for IE6 doubling float margin bug */
margin-right:10px;
padding: 5px;
width:210px;
float:left;
background-color: brown;
}
#main {
width:100%;
float:left;
background-color: yellow;
}
#contentleft {
margin:5px !important;
margin:5px 5px 5px 3px; /* for IE6 doubling float margin bug */
padding: 5px;
width:220px;
float:left;
background-color: orange;
}
#contentright {
padding: 5px;
margin: 5px 5px 5px 240px;
background-color: red;
}

Gruß
Antipitch