[CSS] 3 Soalten layout height

**jahlives** · 24.01.2007, 16:46

Nun meine Frage, wie mach ich, das alle div container gleich groß sind aber dennoch den ganzen content anzeigen.

Gleich gross kannst du nur mit CSS imho vergessen. Dazu müsstest du mit JS die Grösse des Grössten divs feststellen und die anderen entsprechend vergrössern. Denn divs richten sich immer nach der Masse des Inhalts.

Mit CSS geht das nur wenn du mal nach dem Stichwort "faux columns" suchst.

Gruss

tobi

**Dulla_Po** · 24.01.2007, 17:04

Jut, danke!
Aber ich hab jetz irgendwie noch ein andres Problem, is mir irgendwie eben nicht aufgefallen. Ich hab beim Header eine gesamtbreite von 760px. Dadrunter der der div hat 180, der daneben 396 und der daneben wieder 180 + 4 ränder, die 1px breit sind von links nach rechts abgegrenzt. eg sollte das ja genau hinhauen. Doch IE und Firefox zeigen den Header Rand ein px weiter rechts an, als der vom rechten div-container. Wenn ich den div rechts jedoch um 1px größer mache, gibt es einen Zeilenumbruch, weil ich den auf float:right eingestellt hab. Wisst ihr woran das mit den falschen maßen liegen könnte?
Hier der QT:
main.php

PHP-Code:


<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="css/standard.css" rel="stylesheet" type="text/css" />

<title>TITLE</title>

</head>

<body><div class="root" style="width:760px; margin:5px 5px;">

<div style="width:760px;" class="header"><?php include("header.php"); ?></div>

<div class="links" style="float:left; width:180px;"></div>

<div class="inhalt" style="float:left; width:396px;"></div>

<div class="rechts" style="float:right; width:180px;"></div>

<br style="clear:both" />

<div style="width:760px;" class="footer"></div>

</div>

</body>

</html>

und hier die style.css

Code:

/*################################Style-Standard############################################*/
/*algemeine Einstellungen*/
body{background-color:#000000;}
	/*div-container, der alles umschließt || style="width:760px; margin:5px 5px"*/
	.root{}
		/*header div-container || style="width: 760px;"*/
		.header{margin:0px; border:1px solid #999999;}
		/*linker div-container || style="float:left; width:180px"*/
		.links{margin:0px; border-bottom:1px solid #999999; border-left:1px solid #999999;}
		/*rechter div-container || style="width:760px;" class="footer"*/
		.rechts{margin:0px; border-bottom:1px solid #999999; border-right:1px solid #999999;}
		/*mittlerer div-container || style="float:right; width:180px;"*/
		.inhalt{margin:0px; border-bottom:1px solid #999999; border-right:1px solid #999999; border-left:1px solid #999999;}
		/*ganz unterer div-container || style="float:left; width:396px"*/
		.footer
	/*Ende der Hauptseiten div-container*/

Weiß nich ob ihr soviel braucht, da ich das erste mal mit divs arbeite. Tabellen sind einfach nicht so kompliziert zu platzieren!

Hier ist ein Screen des Fehlers:

[CSS] 3 Soalten layout height