Autor |
Nachricht |
kjutta
Threadersteller
Dabei seit: 01.02.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 01.02.2006 13:13
Titel CSS-Problem: Containerhöhe nicht nach Inhalt ausgerichtet |
|
|
Hallo zusammen,
ich werkele hier schon eine Weile an einem CSS-Problem rum und komme auf keinen grünen Zweig. [/code]
Eigentlich wäre es ganz einfach: ich habe einen Div-Container, der zwei Div-Elemente als Inhalt hat.
Das Problem: die Höhe meines aussenliegenden Divs richtig sich aber NICHT nach der Höhe des höchsten Inhalt-Elements. So ist oft die Höhe des linken, schmalen Divs höher, als der zweite Inhaltsdiv und überlappt dann einfach den aussenliegenden Container.
Warum richtet sich ein Container nicht nach seinem Inhalt? Bzw. wie bringe ich ihn dazu, das zu tun?
der vereinfachte Code:
<div style="background: url(bg.gif);background-repeat:repeat-y;">
<div style="margin:0;padding:2px;float:left;width:22px;"></div>
<div style="margin-left:22px;padding:1px 0 10px 10px;"></div>
</div>
<div style="clear: both;border-bottom: 1px solid #597192;"></div>
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Mi 01.02.2006 13:27
Titel Re: CSS-Problem: Containerhöhe nicht nach Inhalt ausgerichte |
|
|
kjutta hat geschrieben: |
<div style="background: url(bg.gif);background-repeat:repeat-y;">
<div style="margin:0;padding:2px;float:left;width:22px;"></div>
<div style="margin-left:22px;padding:1px 0 10px 10px;"></div>
</div>
<div style="clear: both;border-bottom: 1px solid #597192;"></div> |
Code: |
<div style="background: url(bg.gif);background-repeat:repeat-y;">
<div style="margin:0;padding:2px;float:left;width:22px;"></div>
<div style="margin-left:22px;padding:1px 0 10px 10px;"></div>
<div style="clear: both;border-bottom: 1px solid #597192;"></div>
</div>
|
nicht getestet aber das sollte es tun. floatende elemente immer direkt im selben hierarchielevel clearen.
Zuletzt bearbeitet von sahnemuh am Mi 01.02.2006 13:27, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
kjutta
Threadersteller
Dabei seit: 01.02.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 01.02.2006 13:53
Titel
|
|
|
Hallo sahnemuh (übrigens cooler Nick ),
leider hat das auch nicht den gewünschten Effekt. Sobald mein zweites, rechtes Element zu kurz ist, ragt die Buttonleiste links über den Container raus wie gehabt.
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Mi 01.02.2006 14:29
Titel
|
|
|
Code: | <div style="background-color: #d00;">
<div style="margin:0;padding:2px;float:left;width:22px; height: 99px; background-color: #836354;"> </div>
<div style="float:left; padding:1px 0 10px 10px; height: 40px; background-color: #265396;"> </div>
<div style="clear: both;border-bottom: 1px solid #597192; height: 1px; font-size: 1px; line-height: 1px;"> </div>
</div> |
versuchs damit..
ansonsten zeig mal mehr code.. vielleicht wirkt sich ja auch was anderes auf das element aus.
|
|
|
|
|
kjutta
Threadersteller
Dabei seit: 01.02.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 01.02.2006 15:01
Titel
|
|
|
eine fixe Höhe kann ich leider nicht nehmen, da das dynamische Einträge sind.
Aber nachdem ich in den letzten Div das "height:1px" übernommen habe, kapiert es endlich auch der Internet Explorer...ufff....
Code: | <div style="clear: both;height: 1px;"></div> |
Danke!!!!!
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Mi 01.02.2006 15:42
Titel
|
|
|
kjutta hat geschrieben: | eine fixe Höhe kann ich leider nicht nehmen, da das dynamische Einträge sind.
Aber nachdem ich in den letzten Div das "height:1px" übernommen habe, kapiert es endlich auch der Internet Explorer...ufff....
Code: | <div style="clear: both;height: 1px;"></div> |
Danke!!!!! |
die fixe höhe war nur zum testen.
wenn du einem element keine festen abmaße und /oder keinen inhalt gibst, wird es vom ie nicht gerendert... daher schreib ich immer nen non-breaking space in die clearer und setze font-size, line-height und die höhe des elements auf 1. so gehst du sicher, dass es auch wirklich immer gerendert wird und nur 1px hoch ist.
Zuletzt bearbeitet von sahnemuh am Mi 01.02.2006 15:42, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
Problem mit HTML Tabellen - Zellen falsch ausgerichtet
css - containerhöhe=höhe hintergrundbild
css Problem im IE6 - Inhalt doppelt angezeigt
CSS Problem - Inhalt an Footer und Header anpassen?
[CSS] Bild in DIV mitwachsend UND unten ausgerichtet?
script.aculo.us Effects.SlideUp - Problem mit Inhalt
|
|