✔ Floats nicht komplett aufheben?

Status
Nicht offen für weitere Antworten.
L

Layna

Erfahrenes Mitglied
Hallo :).
Wenn ich ein clearendes div einsetze (das hat eifnach nur die Eigenschaft "clear:both") werden ja ALLE floats aufgehoben... leider passt mir das dieses mal gar nicht.
Gibt es eine Möglichkeit z.B. nur die Floats des direkten Elternelementes aufzuheben wenn ein clear ausgerufen wird?

Larayna
 
Hi,

kannst du den Fall mit dem dazugehörigen Quellcode etwas konkreter darstellen?
 
Hi :).
Klar, im konkreten Fall geht es hierum (könnte dir bekannt vorkommen ;)):

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
 <title>Unbenannt</title>
 <meta name="generator" content="Scribe! 2 [http://scribe.de]" />
 
 <link rel="stylesheet" type="text/css" href="floater.css" />
 <!--[if lte IE 7]>
<style type="text/css">
#main {
height: 1%;
}
</style>
<![endif]-->
</head>

<body>

<div id="outer">
	<div id="left">
		Hier ist eine Box.
	</div>
	<div id="main">
		<div style="clear: both;"></div>
	</div>
</div>

</body>
</html>

CSS: 
#outer {
	margin: 10px;
	background-color: black;
}


#left{
	width: 120px;
	background-color: Aqua;
	float: left;
}

#main {
	margin-left: 130px;
	background-color: green;
}


* html #main {
height: 1%;
}

Da das ganze ein Template für Typo3 sein soll komtm es vor dass mitten im #main ein clear gemacht wird... was dazu führt dass alle folgenden sachen in der Höhe unter den #left rutschen.
Genau das will ich nicht.... ich möchte aber auch ungerne auf das floating verzichten, da ich sonst wieder überall absolute positionierungen bauen muss die, wenn das clearing-problem nicht wäre, eigentlich unnötig sind.
 
Vielleicht hilft dir da http://positioniseverything.net/easyclearing.html weiter?

Die in dem Artikel genannte Klasse .clearfix wird dann zusätzlich im DIV #outer aufgerufen:

Code: 
<div id="outer" class="clearfix"> ... </div>

Achja, den "Star-HTML-Hack" (* html #main) kannst du in der floater.css getrost rausnehmen. ;)
 
Danke erstmal für den Link, ist markiert als Quelle und eingesetzt :).

Leider hilft es mir bei meinem eigentlichen Problem nicht, da ein clear vom Typo3-System eingefügt wird. Mir fehlt ja sozusagen kein clear, es geht nur zu weit:

HTML: 
<div id="outer">
	<div id="left">
		Hier ist eine Box. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		in gross!
	</div>
	<div id="main" class="clearfix">
		<div>Hier steht Text</div>    
		<div style="clear:both;"><!--Dieses Div kann ich nicht verhindern--></div> 
		<div>Noch mehr text... jetzt zu weit unten.</div>
</div>

führt mit oben angegebenem CSS zu folgende:
 

Anhänge

  • Clipboard01.jpg
    Clipboard01.jpg
    10,2 KB · Aufrufe: 18
Unabhängig davon, dass ich empfohlen hatte, die Klasse .clearfix im DIV #outer aufzurufen, da ja diese Box ihre tatsächliche Höhe annehmen und den (schwarzen) Hintergrund bis zum unteren Elementrand komplett ausfüllen soll, erkenne ich derzeit als einzig funktionierende Möglichkeit, die Box #main ebenfalls mit der float-Eigenschaft auszuzeichnen.
 
Sorry wegen der div-verwirrung... Das Problem bringt mich total aus dem tritt.
Aber recht hast du, hilft auch #outer nicht.
Ich bin jetzt am beide sachen floaten udn sehen ob ich die breiten hinkriege wie ich sie will.
Jedenfalls vielen Dank, mal sehen ob das Ding irgednwann tut was ICh will ;).
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück