grundgeruest-mit-footer-unten-ugne-flexbox-und-mit-float.php
Quell Code
<!DOCTYPE html>
<html lang="de">
<head>
<title>footer</title>
<style>
* {
margin:0;
padding:0;
list-style:none;
border:none;
text-decoration:none;
}
html , body , #container {
height:100% ;
}
body {
text-align:center;
width:100%;
}
#container {
background:#ddd;
}
#container:before {
content:"";
margin-bottom:-100px;
height:100%;
float:left;
display:inline-block;
}
#header {
background:#09c;
height:100px;
color:#fff;
}
#content {
width:100%;
margin:0 auto;
float:left;
background:#ddd;
}
#content_innen {
margin:0 auto;
text-align:left;
}
#left {
width:28%;
float:left;
}
footer {
height:100px;
background:#09c;
clear:both;
}
#header h1 {
padding:32px;
text-align:center;
}
#right h2 , #right p {
padding:20px;
}
#right{
margin:20px;
padding:10px;
width:calc(70% - 67px);
float:right;
background:#ffa;
border:1px solid #aaa;
}
#nav {
margin:20px 0 0 10px;
border:1px solid #aaa;
}
#nav li {
margin-top:1px;
}
#nav li a {
color:#000;
display:block;
padding:5px;
background:#ffa;
}
#nav a:hover {
color:#fff;
background:#09c;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Footer immer unten mit der Pseudoklasse :before</h1>
</div>
<div id="content">
<div id="content_innen">
<div id="left">
<ul id="nav">
<li><a href="">HTML Angaben </a></li>
<li><a href="">CSS Angaben </a></li>
<li><a href="../">Zur Anleitung </a></li>
<li><a href="../">CSS Anleitungen </a></li>
<li><a href="/">Startseite </a></li>
</ul>
</div>
<div id="right">
bla text
</div>
</div>
</div>
<footer><h2>Footer</h2></footer>
</div>
</body>
</html>