2 Left Boxen und die Rechte maximale Bildschirmbreite
0 
suit
0 0 suit
0 0 suit
0 
Felix Riesterer
0
1 Beat
2 Left Boxen und die Rechte maximale Bildschirmbreite
Hallo,
vielleicht könnt Ihr mir ja helfen:
Ich habe 2 div-Boxen welche beide 'left' floaten damit diese nebeneinander stehen. Die linke hat eine feste breite von 200px und nun möchte ich das sich die rechte Box einfach den kompletten Rest nimmt. Sodass wenn ich den Browser verkleinere oder vergössere diese sich mit verkleinert oder vergrössert.
Wie bekomme ich das am besten hin?
Danke im vorraus.
Gruß, Waldemar
-
Wie bekomme ich das am besten hin?
Indem du nicht beide floaten lässt sondern nur eine und die anderem mit einem entsprechenden Außenabstand versiehst.
-
Wie bekomme ich das am besten hin?
Indem du nicht beide floaten lässt sondern nur eine und die anderem mit einem entsprechenden Außenabstand versiehst.
Hi,
Danke für die Antwort. Das habe ich schon gemacht, und das klappt auch, stimmt. Allerdings habe ich dann das Problem das der Text in der rechten Box unter der Höhe der linken Box anfängt, obwohl die rechte Box links oben neben der linken Box anschließt. Any Idea?
Gruß, Waldemar
-
-
Any Idea?
Da ich deinen Code nicht kenne, nein.Das Problem ist das der Inhalt in der rechten Box durch Typo3 ausgegeben wird, und da kommen mehrere Elemte drin vor wo der float durch clear:both gecleared wird.
Dadurch kommt zustande das der float vom linken Elemente auch gecleared wird. Das kann / darf ich leider auch nicht ändern.
Gruß, Waldemar
-
Dadurch kommt zustande das der float vom linken Elemente auch gecleared wird. Das kann / darf ich leider auch nicht ändern.
Definiere "kann / darf".
-
-
-
Lieber Waldemar,
Allerdings habe ich dann das Problem das der Text in der rechten Box unter der Höhe der linken Box anfängt, obwohl die rechte Box links oben neben der linken Box anschließt.
und in welchem Browser?
Any Idea?
So nicht, nein.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:) -
Hi Waldemar!
Allerdings habe ich dann das Problem das der Text in der rechten Box unter der Höhe der linken Box anfängt, obwohl die rechte Box links oben neben der linken Box anschließt. Any Idea?
Informiere dich über Block Formatting Context.
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
-
-
-
Wie bekomme ich das am besten hin?
CSS Autoren leben im irrigen Glauben, dass float so etwas wie column bedeute. Das ist nicht der Fall.
float bedeutet, dass ich etwas aus dem normalen Fluss entferne. Dabei wird der notwendige Platz reserviert, und die inline Boxen im normalen Fluss werden um diesen reservierten Bereich gefloatet.
Wenn dieser normale Fluss Blockboxen enthält, werden die margin werte nur relativ zum normalen Flow berechnet, solange kein block-formating Kontext vorliegt.
Erst wenn eine Block-box auch einen block-formating Kontext aufweist (welcher mit overflow:auto oder overflow:hidden getriggert werden kann), werden auch die margins relativ zum reservierten Raum angelegt.Es folgt eine Demo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Untitled</title> <style type="text/css"> body{width:40em; border:10px solid #ccc;} .float{ float:left; background: #fed;} p {border:1px solid red;} #a p{padding:1em;} #b p{overflow:hidden;} #c p{overflow:auto;} #d p{margin-left:5em;} </style> </head> <body> <div id="a"> <div class="float">Ich bin ein Float</div> <p>Ich bin ein Paragraph<br> Sonderangabe: <code>padding:1em;</code><br> mit etwas längerem Text, der das Umflussverhalten demonstrieren soll.</p> </div> <div id="b"> <div class="float">Ich bin ein Float</div> <p>Ich bin ein Paragraph <br> Sonderangabe: <code>overflow:hidden;</code><br> mit etwas längerem Text, der das Umflussverhalten demonstrieren soll.</p> </div> <div id="c"> <div class="float">Ich bin ein Float</div> <p>Ich bin ein Paragraph<br> Sonderangabe: <code>overflow:auto; </code><br> mit etwas längerem Text, der das Umflussverhalten demonstrieren soll.</p> </div> <div id="d"> <div class="float">Ich bin ein Float</div> <p>Ich bin ein Paragraph<br> Sonderangabe: <code>margin-left:5em;</code><br> mit etwas längerem Text, der das Umflussverhalten demonstrieren soll.</p> </body> </html>Falls man keinen DOCTYPE HTML strict verwendet, braucht MSIE zusätzlich die Angabe zoom:1; damit bei overflow auch hasLayout getriggert wird.
Im Zusammenhang mit floats sollte man besser nur die strict Variante verwenden.
Ende der Belehrung.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische