2 divs nebeneinander gleich hoch ohne absolute werte

Roland · 13. September 2012

einen schönen Nachmitag

ich versuche gerade (naja eigenltich schon seit Jahren) erfolglos ein zweispaltiges Layout ohne Tabellen hinzugekommen.

probleme:
-gefloate elemente vergrößern das div nicht in den sie stecken (durch den blocker ist das ja behoben aber das ist wahrscheinlich auch nicht die beste Taktik)
-wenn dem umschlisenden div nicht eine höhe gegeben ist bringt bei den gefloateten element height: 100% nichts

ja und ich bekomme es einfach nicht hin das die 2 elemente gleich hoch sind und die höhe soll halt durch das höhere von beiden bestimmt sein (bei tabelle ist das ja in einer sec erledigt aber das ist nicht valide)

würde mich über hilfe freuen

HTML

<style type="text/css">
	#blocker{
		clear:both;
	}
	#links{
		background: #FFFF00;
		margin-right: 150px;
	}
	#rechts{
		float: right;
		width: 150px;
		background: #FF9900;
	}
</style>




<div id="container">
	<div id="rechts">terasdt</div>
	<div id="links">test</div>
	<div id="blocker"></div>
</div>

Alles anzeigen

unkown-6363 · 13. September 2012

gib doch einfach den div-id's rechts und links eine höhe von X pixeln?

CSS

container{    height:; /* height hier entfernen */}#rechts, #links{    height: Xpx; /* das X ersetzten */}

Ich hoffe ich konnte helfen.

Roland · 13. September 2012

ich will den rechts links keine festen Höhen geben.
und das ist dan irgendwie unmöglich^^

unkown-6363 · 13. September 2012

CSS

#rechts, #links
{
    min-height: Xpx;
}

Was hälst du davon?

lauras · 13. September 2012

Geht es dir um die Funktionalität (da würde mir allerdings kein logischer Grund für einfallen und da gibt es meines Wissens auch keine Lösung) oder ums Aussehen? Wenn es dir ums Aussehen gilt ist dein Stichwort Faux Colums - eine Hintergrundgrafik für #container, die 1px hoch ist und entsprechend der Hintergrundfarben der beiden Spalten gefärbt ist und dann nach unten wiederholt wird - einfach mal googlen, gibt es Tausende Tutorials für.

Roland · 13. September 2012

unkown-6363 naja dann würde es bis zu der größe gehen und danach wieder das gleiche wie von anfang an.

lauras danke so habe ich es jetzt gelöst

HTML

<style>
	#container {
		background:#00FF00 repeat-y right url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAABCAYAAAA8YlcZAAAAEklEQVQokWM4fPjw/1E8iqmNAa3E7EDcNitBAAAAAElFTkSuQmCC);
	}
	#links{
		margin-right: 150px;
	}
	#rechts{
		float: right;
		width: 150px;
	}




</style>




<div id="container">
	<div id="rechts">test</div>
	<div id="links">terasdt</div>
	<div style="clear:both"></div>




</div>

Alles anzeigen

die belibig große spalte ist jetzt grün und das rechts mit der festen breite da ist das 1px hohe bild.

djheke · 18. September 2012

Du bist der Lösung schon sehr nah. Du brauchst nur dein ClearDiv unmittelbar vor dem schließenden #linksDiv einfügen. Allerdings reicht hier auch ein

Code

<br style="clear:both;" />

aus. Somit ist #links immer die längste Spalte.
Beispiel:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website</title>
<style type="text/css">




* {
 margin:0;
 padding:0;
}




#container {
 width:960px;
 background:#aaa  ;
 margin:0 auto;
}




#header {
 height:100px;
 background:#09c;
 color:#fff;
}




#navi {
 float:right;
 width:200px;
}




#inhalt {
 margin-right:200px;
 background:#adf;
}




#footer {
 background:#09c;
 color:#fff;
 height:100px;
 clear:both;
}




p { padding:10px;}




</style>
</head>
<body>




<div id="container">
<div id="header"><h1>Homepage</h1></div>
<div id="navi">
<p>Navigation</p><p>Navigation</p><p>Navigation</p>
</div>
<div id="inhalt">
<p>Inhalt</p>
<br style="clear:both" />
</div>
<div id="footer">footer</div>
</div>




</body>
</html>

Alles anzeigen

Roland · 18. September 2012

danke das funktioniert.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website</title>







<style>
	#container {
		background:#00FF00;
	}
	#links{
		margin-right: 150px;
		background:#FF0000;

	}
	#rechts{
		float: right;
		width: 150px;
	}




</style>




</head>
<body>




<div id="container">
	<div id="rechts">
		<b>Navigation</b><br/>
		text text text text text text text text text text text text text text text text text			
	</div>
	<div id="links">
		<b>2-spalten-layout jea</b><br/>
		und noch ein bischen text : text text text text text text text text text text text text text text text text text
		text text text text text text text text text text text text text text text text text text text text text
		<div style="clear:both"></div>
	</div>
</div>




</body>
</html>

Alles anzeigen

so sieht dann mein code aus

2 divs nebeneinander gleich hoch ohne absolute werte

Jetzt mitmachen!

Teilen