Verhindern, dass div die Breite erbt

Spelmann

Spelmann

Erfahrenes Mitglied
Hallo zusammen.
Manchmal denke ich, ich habe das Prinzip von CSS im Ansatz verstanden, und dann stehe ich doch wieder da wie ein Anfänger.

Wie kann ich verhindern, dass .innerfeld die Breite von .hauptfeld erbt?

HTML: 
<style type="text/css">
  .hauptfeld { width:680px; height:300px; background:blue }
  .innerfeld { width:auto; height:100px; text-align:right; background:red }
</style>

<body>
    <div class="hauptfeld">
    	<div class="innerfeld">Inhalt</div>
    </div>
</body>

Ich hab es mit position:relative bzw. absolute versucht. Bei letzterem bekomme ich den gewünschten Effekt, allerdings strecken sich dann die übergeordneten divs (im Original gibts die dann) nicht mehr mit, weil diese Beiden hier ja dann aus dem Float genommen sind.
Kann mir einer sagen, was ich hier noch immer nicht kapiert habe?

(:( ich will meine Tabellen zurück)
 
Hi,

das lässt sich neben der erwähnten absoluten Positionierung, entweder mit display:inline, oder, wenn, wie im vorliegenden Fall, zumindest eine Höhe für das Element erwünscht ist, und daher "Block-Level-Charakteristika" benötigt wird, mit der float-Eigenschaft (left / right) verhindern.

mfg Maik
 
Hallo Mike,
Stimmt. In diesem kleine Beispiel reicht es, wenn ich .innerfeld display:inline verpasse.
Leider funktionierts so nicht 100%ig bei dem originale Projekt.
Wär jetzt aber zu fett hier den ganzen Quellcode mit der kompletten anhängigen CSS Datei zu posten.
Innerhalb von <div class="innerfeld"> befinden sich wieder weitere divs. Die sollen so breit sein wie .innerfeld. Wenn ich denen display:inline nicht verordne, strecken die mir .innerfeld aber wieder auseinander. Wenn ich nichts tue werden sie jedoch auch falsch dargestellt.

Mmh, ich werd wohl doch den ganzen Code posten müssen was?
 
Ich weiß ja nicht, was der ganze Code so enthält - mir reichen da für's Erste die relevanten Auszüge aller involvierten Boxen aus dem HTML- und CSS-Code, oder einfach der Link zur Seite :-)

lg Maik
 
Vielen Dank für Dein Interesse. Ich habe die Seite gerade noch auf'm lokalen Server.
Bin aber schon ein Stück weiter. Ich habe einigen übergeordneten divs eine float:left, und dem innersten div eine display:inline verschrieben. Sieht im Firefox aus wie es soll, nur der IE macht wieder Freude.
Aber ich denke, Du hast mich auf die richtige Fährte gebracht. Wenn ich es nicht packe, poste ich den Kram doch noch. Aber erst mal vielen Dank.
 
Ich habe das Problem jetzt soweit eingegrenzt, dass es nur noch den üblichen IE Trouble gibt.
So sieht der Quelltext jetzt aus:
HTML: 
<style type="text/css">
	.blue { width:680px; height:300px; background:blue }
	.red {  height:100px; text-align:right; background:red; float:left; display:block }
	.yellow { height:20px; background:yellow; font-weight:bold }
</style>
<title>Breitenproblem</title>
</head>

<body>
    <div class="blue">
    	<div class="red">
        	<div class="yellow">Dieses Feld soll immer so breit sein, wie das Rote</div>
            <div>Dieses Feld ist so breit wie sein Inhalt, und immer breiter als das Gelbe</div>
        </div>
    </div>
</body>
</html>

Im Firefox ist alles o.k. Im IE gibts unterschiedliche Ergebnisse.
Zur schnellen Ansicht hier als Screenshot:
http://img261.imageshack.us/img261/1779/cssproblemwc5.gif

Was in der Grafik wahrscheinlich missverständlich ist: Das rote Feld ist durch seinen Inhalt im Projekt immer breiter als das Gelbe.

Kann ich den Quellcode besser schreiben, ohne auf Hacks zurückgeifen zu müssen?
 
Spelmann hat gesagt.:
Ich habe das Problem jetzt soweit eingegrenzt, dass es nur noch den üblichen IE Trouble gibt.
Zum Vergrößern anklicken....
Der Knackpunkt ist hier die height:20px-Deklaration für die Box .yellow.

Mit height:auto bzw. keiner Höhenangabe interpretiert der IE (6 + 7) das Stylesheet bei mir wie gewünscht.

mfg Maik
 
Vielen Dank.
Da wäre ich nie drauf gekommen. Gibt es dafür eine schlüssige Erklärung, um das Prinzip zu verstehen, oder ist das nur dem eigenen Universum des IE geschuldet?
 
Ich bin mir jetzt ehrlich gesagt nicht sicher, ob der IE die gelbe Box eventuell wegen der festen Höhenangabe auf eine 100%-Breite skaliert, die sich an der blauen Box orientiert, und daher den Rahmen der roten Mutterbox sprengt :confused:

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück