Versuch eines 2-Spalten Layouts

**nudelsalat** · 27.11.2011 11:57

Hab aus interesse an der Problemstellung mal das hier zusammengeschustert:

Code:

<html>
<head>

<style type="text/css">
body{
margin:		0;
padding:	0;
}

div#header{
	position:absolute;
	left:	0%;
	width:	100%;
	top:	0%;
	height: 100px;
	background-color:	rgb(100,100,255);
}

div#navi{
	position:absolute;
	left:	0%;
	width:	300px;
	top:	100px;
	height: 80%;
	background-color:	rgb(100,255,100);
}

div#content{
	position:absolute;
	left:	300px;
	width:	-moz-calc(100% - 300px);
	top:	100px;
	height: 80%;
	background-color:	rgb(255,100,100);
	overflow: auto;
}

div#footer{
	position:absolute;
	left:	0%;
	top: 	-moz-calc(80% + 100px);
	width:	100%;
	height: -moz-calc(20% - 100px);
	background-color:	rgb(255,255,100);
}

</style>

</head>


<body>


<div id="header">
header
</div>

<div id="navi">
navi
</div>

<div id="content">
content
</div>

<div id="footer">
footer
</div>

</body>
</html>

Mit dem css3 feature calc bzw. -moz-calc geht das ganze recht einfach. Funktioniert jetzt wegen -moz-calc nur im firefox.

Zitat

so allmählich verfluche ich die Welt der Webentwicklung ...

Detto. Html und insbesondere div Layouts sind doch echt grauenhaft.

edit:
overflow: auto; zu #content hinzugefügt. Sonst läuft der Inhalt bei Übergröße unter dem Footer weiter.

Thema: Versuch eines 2-Spalten Layouts

Themen-Optionen

Anzeige

Baum-Darstellung

Berechtigungen