zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden verschachtelte div Elemente

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.02.2006, 12:49
Luc Luc ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.02.2006
Beiträge: 8
Luc befindet sich auf einem aufstrebenden Ast
Standard verschachtelte div Elemente

Ich will ein Layout mit 3 Spalten machen, bei dem die Spalten immer gleich hoch sind, aber eigentlich beliebig lang sein können.
Also hab ich mir gedacht, ich pack drei DIV Elemente in ein DIV und gib den Kindelementen die höhe 100%:

Code:
<head>
	<style type="text/css" title="currentStyle" media="screen">
		div {
			border:		1px solid red;
		}

		.box {
			
		}

		.spalte1 {
			float:		left;
			width:		100px;
			height:		100%;
		}

		.spalte2 {
			float:		left;
			width:		380px;
			height:		100%;
		}

		.spalte3 {
			float:		left;
			width:		100px;
			height:		100%;
		}
	</style>
</head>
<body>

<div class="box">
<div class="spalte1">
blablabla
</div>
<div class="spalte2">
<h1>Titel</h1>
blablabla
</div>
<div class="spalte3">
blabla
</div>
</div>

</body>
</html>
logischerweise sollte jetzt ja das Box div so hoch sein wie höchste spalte und alle 3 Kindelemente umschliessen
Kann mir jemand erklären, wieso das nicht so ist und wie man den gewünschten Effekt erzielen kann?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.02.2006, 13:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

100% Höhe sind immer in Relation zum Elternelement zu sehen.

Mit 100% Höhe in einem Element erreichst Du nicht, dass die "Resthöhe" ausgeschöpft wird.

Siehe auch die ergiebige Forumssuche nach "100% Höhe". Oder ein paar Beispiele:
http://www.themaninblue.com/experime...ple_short.htm#
oder
http://d-graff.de/demos/selfhtml/kop...ispalten1.html

Dann hast Du die Elemente gefloatet aber nicht gecleart. Siehe dazu:
http://www.xhtmlforum.de/viewtopic.php?t=3772
Du musst dem Element, welches die Floats beinhaltet, ulles CSS-Schnipsel geben, damit sauber gecleart wird. Das ganze quasi doppelt mit dem Starhack, weil man dem IE extra über die Strasse helfen muss.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.02.2006, 14:03
Luc Luc ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.02.2006
Beiträge: 8
Luc befindet sich auf einem aufstrebenden Ast
Standard

Ja danke, jetzt hats funktioniert

Das mit der höhe war mir auch vorher klar, aber das mit dem clear wusste ich nicht

Ich verstehe aber immer noch nicht so genau, wieso das Elternelement erst dann die Kindelemente umschliesst, wenn diese gecleart werden (und das nachdem das Elternelement geschlossen wurde)...
Mit Zitat antworten
  #4 (permalink)  
Alt 01.02.2006, 14:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

Zitat:
Zitat von Luc
Ich verstehe aber immer noch nicht so genau, wieso das Elternelement erst dann die Kindelemente umschliesst, wenn diese gecleart werden (und das nachdem das Elternelement geschlossen wurde)...
Siehe: http://css-technik.de/css-examples/219_9/ (relativ weit unten steht der Abschnitt "Die Eigenschaft 'clear'")
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Div 1 für Div 2 Transparent aber nicht für Div 3 Shwicefoose CSS 3 29.11.2011 17:47
joomla template entschlüsseln nieselfriem CSS 2 18.03.2008 14:12
Die maximale breite wird nicht erkannt notebook20000 CSS 9 22.06.2006 21:14
div Positionierung bei Browsern Ancient CSS 22 17.03.2005 01:49
Elemente in einem Div Container links & rechts ausrichte oliwa CSS 8 16.07.2004 15:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:27 Uhr.