Zur Navigation

DIV & float

1 Rob (Gast)

Hallo Zusammen...

kämpfe seit tagen mit einem problem. ich hab den code angehängt.

mein ziel ist, dass das grüne DIV sich der grösse des roten DIVs anpasst. sprich die grüne box geht gleich weit runter wie die rote.

weiter würde ich gerne wissen, falls ich diese grüne box nicht bis unten vergrössert haben möchte, sonder so klein wie sie ist, aber zentriert in der höhe haben möchte, wie kann ich das machen?

aber ich möchte keine fixen grössen verwenden - ist unschön...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
div.clear {
clear:both;
}
</style>

<BODY>

<div style="background:blue;padding:5;float:left;">
    <div style="background:red;width:200;float:left;">
    asjn djahs dkjahekxhwb kjhsbdc§uzwe §uzbescuhzwb cdubasjn djahs dkjahekxhwb kjhsbdc§uzwe §uzbescuhzwb cdubasjn djahs dkjahekxhwb kjhsbdc§uzwe §uzbescuhzwb cdubasjn djahs  zbescuhzwb cdubasjn djahs dkjahekxhwb kjhsbdc§uzwe §uzbescuhzwb cdubasjn djahs dkjahekxhwb kjhsbdc§uzwe §uzbescuhzwb cdu  ahekxhwb kjhsbdc§uzwe §uzbescuhzwb cdubasjn djahs dkjahekxhwb kjhsbdc§uzwe §uzbescuhzwb cdubasjn djahs dkjahekxhwb kjhsbdc§uzwe §uzbescuhzwb cdubasjn djahs  zbescuhzwb cdubasjn djahs dkjahekxhwb kjhsbdc§uzwe §uzbescuhzwb cdubasjn djahs dkjahekxhwb kjhsbdc§uzwe §uzbescuhzwb cdu  scuhzwb cdubasjn djahs zbescuhzwb cdubasjn djahs dkjahekxhwb kjhsbdc§uzwe §uzbescuhzwb cdubasjn djahs dkjahekxhwb kjhsbdc§uzwe §uzbescuhzwb cdu 
    </div>
    <div style="background:green;width:200;float:left;">
        asjn djahs dkjahekxhwb kjhsbdc§uzwe §uzbescuhzwb cdubasjn djahs dkjahekxhwb kjhsbdc§uzwe §uzbescuhzwb cdubasjn djahs dkjahekxhwb kjhsbdc§uzwe §uzbescuhzwb cdubasjn djahs dkjahekxhwb kjhsbdc§uzwe §uzb<br>		
    </div>
</div>
	<div class="clear"></div>

</BODY>
</HTML>

ich verzweifle echt an diesem problem...

vielen dank!
cheerio,
--
Rob

29.07.2005 01:22

2 Jörg Kruse

Hallo Rob,

Eine Möglichkeit wäre es, die Hintergrundfarbe der rechten Box über ein übergeordnetes div zu definieren

<div style="background-color:green;padding:0.1px;width:400px;">
   <div style="background-color:red;width:200px;float:left;">
   asjn [...] cdu
   </div>
   <div style="width:200px;float:left;">
       asjn [...] §uzb<br>
   </div>
<div class="clear"></div>
</div>

dies funktioniert allerdigs nur zufriedenstellend, solange die linke Box länger ist als die rechte

Eine klein wenig aufwendigere Möglichkeit wäre es, für das übergeordnete div eine Hintergrundgrafik zu erstellen: 1px hoch, 400px breit - die ersten 200 Pixel rot, danach grün.

29.07.2005 09:28 | geändert: 29.07.2005 09:29

3 Rob (Gast)

Hallo Jörg

Danke für die Antwort. Es funktioniert auch bestens auf dem IE, aber auf dem FireFox 1.0.6 funktionierts leider nicht.

Als info: die linke box ist immer grösser oder gleich gross wie die rechte, somit wäre ja Deine Lösung absolut superb, nur leider macht uns da der FireFox einen Strich durch die Rechnung...

Hmmm... gibt es denn vielleicht eine Lösung, die den rechten block, resp. grüne box auch vertikal zentrieren könnte, also in der höhe?

vielen dank!

cheerio,
--
Rob

29.07.2005 17:18

4 Jörg Kruse

Hallo Rob,

bei mir funktioniert der von mir angegebene Code in Firefox 1.0.6 - ich hatte allerdings vergessen zu schreiben, dass ich an deinem Code noch ein paar Änderungen gemacht habe: so habe ich den div.clear nach oben verschoben, innerhalb des äußeren grünen divs - außerdem benötigt letzterer noch ein minimales padding (in dem Beispiel 0.1px), damit die Hintergrundfarbe angezeigt wird. Falls Firefox auch nach diesen Änderungen kein gewünschtes Ergebnios anzeigt, liegt die Ursache noch irgendwo anders

vertikales Zentrieren mithilfe von vertical-align:middle funktioniert nicht bei Blockelementen wie divs sondern nur bei Inline-Elementen (Text, Bilder) sowie innerhalb von Tabellenzellen

29.07.2005 17:33

5 Rob (Gast)

hallo jörg!

muss sagen, tippe-toppe, es funktioniert bestens! habe dich soeben zu meinen CSS gott erhoben =8-)
phantastisch, ich versuche schon seit tagen eine lösung zu finden...

aber das mit dem floats ist und bleibt einfach in besonderen fällen ein riesen grosses rätsel für mich...

jedenfalls danke für deine superbe hilfe und noch ein fröhliches wochenende wünsch ich dir!

cheerio,
--
Rob

30.07.2005 00:22

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]