hier ist der block main

1 Heading h1

b1 {border-style:solid;border-width:medium;border-color:red;background:yellow}
b1 {border-style:solid;border-width:medium;border-color:red;background:yellow}

1.1 ein outline ist ein weiterer Rahmen drumherum

b2 {border-style:dotted;border-width:medium;border-color:red;background:pink;outline-style:dashed;}
b2 {border-style:dotted;border-width:medium;border-color:red;background:pink;outline-style:dashed;}

Source html

<html>
 <head>
  <title>e07Sidebar</title>
    <style type="text/css">
             /* Kommentare in css mit ungeschachtelten slash star nicht <!-- .... */
    header{border-style:solid;border-width:medium;border-color:red;display:block;overflow:hidden;position:fixed;top:0;height:8mm;left:0;right:0}
    footer{border-style:solid;border-width:medium;border-color:red;display:block;overflow:hidden;position:fixed;bottom:0mm;height:8mm;left:0;right:0}
    sidebar {display:block;border-style:solid;border-width:medium;border-color:red;background:yellow;position:fixed;left:0;width:20%;top:8mm;bottom:8mm;overflow:auto}
    main {display:block;border-style:solid;border-width:medium;border-color:red;background:green;position:fixed;left:20%;right:0;top:8mm;bottom:8mm;overflow:auto}
    b1 {display:block;border-style:solid;border-width:medium;border-color:red;background:yellow}
    b2 {display:block;border-style:dotted;border-width:medium;border-color:red;background:pink;outline-style:groove}
    </style>
 </head>
 <body>
 <header>
<img src="e05WiwanniAussicht.jpg" align="left"/> das ist der header
 </header>
 <footer>
das ist der footer <img src="e05WiwanniAussicht.jpg" align="right"/>
 </footer>
 <sidebar>
 <h1> dies ist block sidebar
 </h1><ol>
 <li> eins
 <li> zwei
 <li> drei
 <li> vier
 <li> fuenf
 <li> sechs
 <li> sieben
 <li> acht
 <li> neuen
 <li> zehn
 <li> elf
 <li> zwölf
 </ol>
 </sidebar>
 <main>
 hier ist der block main
    
 <h1> 1 Heading h1 </h1>
 <b1>     b1 {border-style:solid;border-width:medium;border-color:red;background:yellow}
 <br>     b1 {border-style:solid;border-width:medium;border-color:red;background:yellow}
 </b1>
  <h2> 1.1 ein outline ist ein weiterer Rahmen drumherum</h2>
 <b2>     b2 {border-style:dotted;border-width:medium;border-color:red;background:pink;outline-style:dashed;}
 <br>     b2 {border-style:dotted;border-width:medium;border-color:red;background:pink;outline-style:dashed;}

 </b2>
    
 <h1>Source html</h1>
<?php highlight_file('e07Sidebar.php') ?>
</main>
 </body>
</html>