mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 09.12.2016 11:10 Benutzername: Passwort: Auto-Login

Thema: CSS-Problem: Containerhöhe nicht nach Inhalt ausgerichtet vom 01.02.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS-Problem: Containerhöhe nicht nach Inhalt ausgerichtet
Autor Nachricht
kjutta
Threadersteller

Dabei seit: 01.02.2006
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Mi 01.02.2006 13:13
Titel

CSS-Problem: Containerhöhe nicht nach Inhalt ausgerichtet

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen,

ich werkele hier schon eine Weile an einem CSS-Problem rum und komme auf keinen grünen Zweig. Menno! [/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>
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mi 01.02.2006 13:27
Titel

Re: CSS-Problem: Containerhöhe nicht nach Inhalt ausgerichte

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Anzeige
Anzeige
kjutta
Threadersteller

Dabei seit: 01.02.2006
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Mi 01.02.2006 13:53
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo sahnemuh (übrigens cooler Nick Lächel ),

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.
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mi 01.02.2006 14:29
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
<div style="background-color: #d00;">
   <div style="margin:0;padding:2px;float:left;width:22px; height: 99px; background-color: #836354;">&nbsp;</div>
   <div style="float:left; padding:1px 0 10px 10px; height: 40px;  background-color: #265396;">&nbsp;</div>
   <div style="clear: both;border-bottom: 1px solid #597192; height: 1px; font-size: 1px; line-height: 1px;">&nbsp;</div>
</div>


versuchs damit..

ansonsten zeig mal mehr code.. vielleicht wirkt sich ja auch was anderes auf das element aus.
  View user's profile Private Nachricht senden
kjutta
Threadersteller

Dabei seit: 01.02.2006
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Mi 01.02.2006 15:01
Titel

Antworten mit Zitat Zum Seitenanfang

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!!!!!
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mi 01.02.2006 15:42
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
 
Ähnliche Themen 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?
Problem mit HTML Tabellen - Zellen falsch ausgerichtet
CSS Inhalt - Hover
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.