DIV soll die maximal mögliche Breite einnehmen

[Bensch]

Hi allerseits.

Folgendes Szenario:

Ich habe 3 Divs nebeneinander.
Links und rechts jeweils mit einer festen Breite (z.B. 100px).
Das in der Mitte soll die von der Auflösung abhängige größtmögliche Breite einnehmen.
Kleiner soll es aber nicht werden!

Ist dies möglich?

http://lessingschule06.le.funpic.de/basti_bensch/

Hier seht ihr das ganze. Links und rechts sind die festen Divs, die rote "mitte" ist das mittlere Div.

Vielen Dank für jede Hilfe,
Gruß,
Ben

[Matthias Payerl]

#middlediv {min-width: expression:(document.body.clientWidth); -width:200px;}

habs nicht ausprobiert, aber kannste ja mal probieren. Pack doch mal bitte die nötigen styles direkt in das html Dokument dann kann man einfach testen.

Gruss
Matthias

[Bensch]

#middlediv {min-width: expression:(document.body.clientWidth); -width:200px;}

Hab ich mal so probiert. Funktioniert aber leider nicht.

habs nicht ausprobiert, aber kannste ja mal probieren. Pack doch mal bitte die nötigen styles direkt in das html Dokument dann kann man einfach testen.

Ok, hab ich mal erledigt.

Noch weitere Ideen?

Gruß,
Benjamin

[Gast]

Hallo

Die beiden DIVs lässt Du ja schon floaten.

In Deinem HTML Teil solltest Du die drei Dinger so anordnen:

<div class="maindiv">
  <div class="leftdiv">links</div>
  <div class="rightdiv">rechts</div>
  <div class="middlediv">mitte</div>
</div>

erst die Umfließenden und dann das zu umfließende Element.

Wenn Du dann dem "middlediv" dann noch mit margin einen angemessenden Abstand von links und rechts gibst solltest immer eine ordentliche Ausnutzung der Auflösung haben.

Bei 100px würde das dann margin:0 100px 0 100px; für den middlediv bedeuten.

Den Teil mit "min-width" gib oben im #html body an. Dann sollte es auch keinen Umbruch geben.

Gruß
Holger

P.S.:
Hier gibt´s noch ein wenig mehr an Erklärungen:

http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig

[Bensch]

Perfekt, vielen dank, so klappt es.
Danke an alle.

Gruß,
Ben

Hallo

Die beiden DIVs lässt Du ja schon floaten.

In Deinem HTML Teil solltest Du die drei Dinger so anordnen:

<div class="maindiv">
  <div class="leftdiv">links</div>
  <div class="rightdiv">rechts</div>
  <div class="middlediv">mitte</div>
</div>

erst die Umfließenden und dann das zu umfließende Element.

Wenn Du dann dem "middlediv" dann noch mit margin einen angemessenden Abstand von links und rechts gibst solltest immer eine ordentliche Ausnutzung der Auflösung haben.

Bei 100px würde das dann margin:0 100px 0 100px; für den middlediv bedeuten.

Den Teil mit "min-width" gib oben im #html body an. Dann sollte es auch keinen Umbruch geben.

Gruß
Holger

P.S.:
Hier gibt´s noch ein wenig mehr an Erklärungen:

http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig

[Matthias Payerl]

Noch weitere Ideen?

.middlediv {
float: left;
border: black 1px solid;
background-color: red;
display: inline;
width:expression(screen.width-247);
}

Funktioniert aber leider nur im IE.....kA warum. die 247 setzt sich zusammen aus den beiden Divs links und rechts, einem eventuellen Scrollbalken und den Bordern. Wenn ich Zeit finde versuch ich das Ding auch im FF hinzubekommen.

Gruss

Matthias

[Matthias Payerl]

So ich denke ich weiss jetzt auch wie man es schafft, dass der FF nicht mehr muckt. Eigentlich verhält sich der FF absolut korrekt. Das mittlere DIV hast du ja zu display:inline gemacht und inline Elemente dürfen keine feste Breite haben. Musst jetzt halt probieren das irgendwie so hinzufrimeln, dass das DIV outline bzw. block ist.

Hoffe das ist auch wirklich die Lösung. Habs nicht probiert.....is mir nur so in der Bahn eingefallen.^^

Gruss Matthias