From b9f8ea83fdb4c77a9fcbc97e04595eef02768c65 Mon Sep 17 00:00:00 2001
From: Peter Hoppe <p-hoppe@gmx.de>
Date: Mon, 12 Dec 2022 15:12:26 +0100
Subject: [PATCH] layout html css

---
 src/layout.txt | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/src/layout.txt b/src/layout.txt
index b2eb474..c57b7e6 100644
--- a/src/layout.txt
+++ b/src/layout.txt
@@ -29,3 +29,61 @@ row
         /column      
 /row
 
+<div class="container">
+  <nav class="nav left">left</nav>
+  <section class="main">
+    <div class="col top">header</div>
+    <div class="col middle">
+      <div class="ver_hor_center">
+        main
+      </div>
+    </div>
+    <div class="col bottom">footer</div>
+  </section> 
+</div>
+
+
+.container {
+  display: flex;
+  flex-flow: row;
+  min-height: 50px;
+  
+}
+.left {
+  flex: 0 0;
+  background-color: blue;
+  height: 100vh;
+}
+.main {
+  width: 100%;
+  background-color: red;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100vh;
+ }
+.col {
+  margin: 2px;
+}
+.top {
+    flex: 0 0;
+    height: 20px;
+    background: yellow;
+  }
+.middle {
+    height: 100%;
+    background: pink;
+  }
+.bottom {
+    flex: 0 0;
+    height: 20px;
+    background: cyan;
+  }
+
+.ver_hor_center
+{
+  /* horizontal und vertikal zentrieren */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}