/* CSS Document */
<!--
/* Notes on dimension relationships
*
* - b is independent of x,y,z and can use any units
* - x, y, z, should probably use the same units and with any gaps between the columns should
* not add to more than the width of #wrap_outer.
* - #wrap_outer & #footer width is given as w. it doesn't need to be set explicitly, if, e.g. you
* use margins to control its width. the key is that x+y+z+gap1+gap2 must add to no more than
* the final width of #wrap_outer
*
* #banner {height:b; top:0;}
* #footer {height:f; width: w; }
* #wrap_outer {width: w; margin-bottom: -f;}
* #wrap_inner {width:x+y+gap; margin: b 0 0; padding-bottom: f;}
* #left {width: x;}
* #main {width: y;}
* #right {width: z; margin: b 0 0; padding-bottom: f;}
*/
/* allgemeine layout styles */
html, body, #wrap_outer {height:100%; }
html, body {margin:0px; padding:0px; border:0px;}
#wrap_outer {position:relative; }
#navi {float:left; top:0px; left:0px; width: 14%; height:100%;}
#inhalt { float:right; left:17%; width:83% ; height:100%;}
#mitte {float:left; width:3%; left:14%; height:100%; }
#header{ float:left; left:0px; top:0px; width:100%; height:50px; background-color:#FFFFFF;}
#faux {
height:100%;
width:100%;
margin:0px;z-index: 0;
}
/* ende der allgemeinen layout styles */
/* presentation styles */
/* colour coding, to differentiate between the different layout regions in this example */
body {
color: #FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#navi { background-color:#00FF00;
}
#inhalt { background-color:#6600FF;
}
#mitte { background-color:#3300FF; background-image:url(menuebilder/leiste.gif); background-repeat:repeat;
}
==========================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" media="screen">
<title>layout typo3 sanizug</title>
</head>
<body>
<div id="faux">
<div id="wrap_outer">
<div id='inhalt'>
<div id="header">
<!--Inhalt des header in dem main bereich -->
text halt
<!-- ende des headers-->
</div>
<!-- your main content goes here -->
MAIN CONTENT
<!-- end main content -->
</div>
<div id='navi'>
<!-- your left sidebar content goes here -->
NAVILEFT
<!-- end left content -->
</div>
<div id='mitte'>
<!-- your right sidebar content goes here -->
<!--m<br>i<br>t<br>t<br>e<br> <br>b<br>i<br>l<br>d<br>-->
<!-- end right content -->
</div>
</div> <!-- outer_wrap -->
</div>
</body>
</html>
