XHTMLforum - box in variabler breite

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - box in variabler breite (http://xhtmlforum.de/showthread.php?t=61134)

double-x

13.05.2010 18:34

box in variabler breite

Hallo,

ich komme nicht weiter und brauche Hilfe.

Ich will eine box links ausrichten (das ist nicht das Problem) welche sich aber zwischen min-width und max-width an die größe des Browserfensters anpasst. Die Contentbox danneben hat eine feste Breite. Beide Boxen sind in einer gemeinsammen box welche 100% höhe und breite haben muss.

Ich komme nicht weiter.
Um das Problem unabhängig von allen anderen Faktoren anzugehen habe ich eine ganzeinfache html geschreiben die das Problem zeigt:

HTML-Code:

<html>

<body>

<div style="width:100%; height:100%; border:1px solid green;">



<div style="min-width:100px; max-width:380px; width:auto; position:relative; height:100%; float:left; display:inline; border:1px solid red;">bla</div>



<div style="width:630px; position:relative; height:100%; float:right; display:inline; border:1px solid blue;">blub</div>

</div>

</body>

Danke für eure Hilfe.

double-x
</html>

IChao

13.05.2010 19:50

Floats schrumpfen auf ihre notwendige Weite. Sie dehnen sich nicht beliebig aus wie normale Blockelemente (bei denen daher max-width sinnvoll sein kann)

10.3.5 Floating, non-replaced elements
If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.

double-x

13.05.2010 20:06

besser

Ok.

ich habe jetzt die floats entfernt. Die beiden Boxen sind nebeneinander. Jedoch ist die linke box nur so breit wie der Inhalt. Sie spricht nicht mal auf min-width an. Wenn ich ehrlich bin habe ich nicht alles in deinem Link verstanden.

Hier nochmal der aktuelle Code.

Kannst du nochmal helfen?

Danke

HTML-Code:

<html>

<body>

<div style="width:100%; height:400px; border:1px solid green;">

<div style="min-width:100px; max-width:300px; width:auto; position:relative; height:100%; display:inline; border:1px solid red;">t</div>

<div style="width:630px; position:relative; height:100%; margin:auto; display:inline; border:1px solid blue;">t</div>

</div>

</body>

</html>

IChao

13.05.2010 22:33

Du hast float entfernt, und display:inline stehen gelassen.
(Warum stand das vorher überhaupt da? Float ließ die Inlines eh zu Block werden.)

Nun, Inlines ignorieren jegliche Weitenangabe. So geht es nicht.

Ist es denn überhaupt nötig, dass der rechte Container im Code nach dem linken kommt?

Was soll passieren, wenn die Gesamtweite kleiner als 730px wird?

Warum sind die Dinger relativ positioniert?

double-x

14.05.2010 07:25

erst rechts dann link

Danke.

Ich habe nun also inlines entfernt. Weiterhin habe ich umgestellt: zuerst wird die rechte und dann die Linke box im Code generiert.

Die sind auch nebeneinander und die linke box hat eine variable breite. Sehr gut.

Nur wird nun die min- und max-width irnoriert.

Du hattest noch gefragt was bei einer kleineren breite als 730px pasieren soll. nun eigentlich soll dann gescrollt werden. Also nicht wie momentan das die linke box dann unter die rechte rutscht.

hier nochmal der aktuelle code.

HTML-Code:

<html>

<body>

<div style="width:100%; height:100%; border:1px solid green;">

<div style="width:630px; height:100%; float:right; border:1px solid blue;">t</div>

<div style="min-width:100px; max-width:300px; width:auto; height:100%; border:1px solid red;">t</div>

</div>

</body>

</html>

das letzt float bekomme ich auch nicht weg.

Danke

IChao

14.05.2010 09:27

min/max wird nicht ignoriert. Man sieht es nur nicht, weil:
Floats werden von nachfolgenden Elementen ignoriert (nur die inliegenden Textzeilen machen dem Float Platz). Die nachfolgende linke Box streckt sich also aus, wie sie will und kann.
Hätte sie einen rechten margin, der die Breite des Floats einnimmt, könnte man min/max aktiv sehen.

margin-right: 630px;

Dieser Margin schiebt sich in z-Richtung unter das Float (wird also vom vorangehenden Float verdeckt), und min-max wird sichtbar.

Das ganze funktioniert nicht im IE6

Alle Zeitangaben in WEZ +2. Es ist jetzt 14:21 Uhr.