Content-DIV soll Größe beim Fensterresize nicht ändern

ich programmiere gerade eine Website, wo auf der linken Seite (50%) ein Logo vorhanden sein soll und auf der rechten Seite (ebenfalls 50%) das inhaltsverzeichnis existiert. Zunächst sah dies sehr gut aus, aber nach der Veränderung der Fenstergröße verschiebt sich der Inhalt der rechten Seite, und nicht der linken Seite mit dem Logo...

Der hier verwendete Code

<style> *{ margin:0; padding:0; } html, body { width: 100%; height: 100%; background: black; overflow: hidden; } /*---Full Website Container----*/ #main{ display:flex; height:100%; } /*---Logo Container------------*/ #left{ flex:1; display:flex; height:100%; align-items:center; justify-content:center; } #left img{ width:100%; max-height:100%; } /*---Content Container---------*/ #right{ flex:1; display:flex; flex-direction:column; border:2px solid red; align-items:center; justify-content:top; } h1 { text-align: left; font-family: "Press Start 2P"; font-size: 4vw; color: #FF6A00; } h2 { text-align: left; font-family: "Kelly Slab"; font-size: 3vw; color: white; } /*---Links---------------------*/ a { text-decoration: none; color: white; } .zoomh2 { padding: 0vw; transition: transform 0.2s; margin: 0vw auto; } .zoomh2:hover { font-size: 133%; cursor: pointer; color: lime; } /*---Fade in from right--------*/ .animated { animation-duration: 0.5s; animation-fill-mode: both; } @keyframes fadeInRightfast { 0% { opacity: 0; transform: translateX(100%); } 100% { opacity: 1; transform: translateX(0); } } .animated:nth-child(1) {animation-delay: 0.0s; } .animated:nth-child(2) {animation-delay: 0.2s; } .animated:nth-child(3) {animation-delay: 0.4s; } .animated:nth-child(4) {animation-delay: 0.6s; } .animated:nth-child(5) {animation-delay: 0.8s; } .animated:nth-child(6) {animation-delay: 1.0s; } .animated:nth-child(7) {animation-delay: 1.2s; } .animated:nth-child(8) {animation-delay: 1.4s; } .animated:nth-child(9) {animation-delay: 1.6s; } .animated:nth-child(10) {animation-delay: 1.8s; } .animated:nth-child(11) {animation-delay: 2.0s; } .animated:nth-child(12) {animation-delay: 2.2s; } .animated:nth-child(13) {animation-delay: 2.4s; } .animated:nth-child(14) {animation-delay: 2.6s; } .animated:nth-child(15) {animation-delay: 2.8s; } .animated:nth-child(16) {animation-delay: 3.0s; } .animated:nth-child(17) {animation-delay: 3.2s; } .animated:nth-child(18) {animation-delay: 3.4s; } .animated:nth-child(19) {animation-delay: 3.6s; } .animated:nth-child(20) {animation-delay: 3.8s; } .animated:nth-child(21) {animation-delay: 4.0s; } .animated:nth-child(22) {animation-delay: 4.2s; } .animated:nth-child(23) {animation-delay: 4.4s; } .animated:nth-child(24) {animation-delay: 4.6s; } .animated:nth-child(25) {animation-delay: 4.8s; } .animated:nth-child(26) {animation-delay: 5.0s; } .animated:nth-child(27) {animation-delay: 5.2s; } .animated:nth-child(28) {animation-delay: 5.4s; } .animated:nth-child(29) {animation-delay: 5.6s; } .animated:nth-child(30) {animation-delay: 5.8s; } .animated:nth-child(31) {animation-delay: 6.0s; } .animated:nth-child(32) {animation-delay: 6.2s; } .animated:nth-child(33) {animation-delay: 6.4s; } .animated:nth-child(34) {animation-delay: 6.6s; } .animated:nth-child(35) {animation-delay: 6.8s; } .animated:nth-child(36) {animation-delay: 7.0s; } .fadeInRightfast { fadeInRightfast; animation-name: fadeInRightfast; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .fadeinlogo{ animation: fadein 2s; } </style> <body> <div id="main"> <div id="left"> <img alt="Logo" class="fadeinlogo nocopy" src="https://i.ibb.co/72f7pGS/Logo-not-original.jpg"> </div> <div id="right"> <h1>Überschrift</h1> <h2 class="animated fadeinrightfast"> <a class="zoomh2" href="#">Irgendwas</a> </h2> <h2 class="animated fadeinrightfast"> <a class="zoomh2" href="#">Nochmal Irgendetwas</a> </h2> <h2 class="animated fadeinrightfast"> <a class="zoomh2" href="#">Ein Drittes Wort</a> </h2> <h2 class="animated fadeinrightfast"> <a class="zoomh2" href="#">etwas Wichtiges</a> </h2> <h2 class="animated fadeinrightfast"> <a class="zoomh2" href="#">Nun aber das letzte</a> </h2> </div> </div> </body>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!