Kurze Scripte und Codeschnipsel ,grundgerüst mit footer unten ugne flexbox und mit float

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>