|
|||
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> double-x </html> |
Sponsored Links |
|
|||
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. |
Sponsored Links |
|
|||
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> |
|
|||
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? Geändert von IChao (13.05.2010 um 23:43 Uhr) |
|
|||
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> Danke |
|
|||
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 |
Stichwörter |
width auto |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Box variabel in Breite und Höhe | Black Fladder | CSS | 2 | 12.04.2008 17:31 |
Div mit variabler Breite durch Fenstergröße | Dwarf | CSS | 2 | 16.01.2007 15:38 |
Kniffliges Layout mit float | Roadrunnerle | CSS | 6 | 14.03.2006 12:26 |
#boxes a:hover.info: 2.posting mit css !!! | marioN | CSS | 5 | 25.01.2004 18:04 |
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, | marioN | CSS | 2 | 19.01.2004 18:17 |