MrMurphy1: Div Box an unterschiedlichen Stellen anzeigen je nach Displaygröße

Beitrag lesen

SELF-Forum

Div Box an unterschiedlichen Stellen anzeigen je nach Displaygröße

MrMurphy1
– Informationen zu den Bewertungsregeln

Hallo

Eine aktuelle Lösung mit dem CSS3 Grid Layout oder Flexbox, die in hinreichend vielen Browsern funktioniert, gibt es für dein Problem leider nicht.

Deshalb bleibt nur die drittbeste Lösung mit float.

Mein Problem ist das Kontaktfeld. Wie bekomme ich das unter den Text?

Das Kontaktfeld (bei mir in einem aside-Element) muss sich im Quelltext unter dem main-Element befinden:

   <nav role="navigation">
      <h2>nav</h2>
   </nav>
   <main role="main">
      <h2>main</h2>
      <p>Und noch etwas Text</p>
      <p>Das main-Element muss höher sein als das nav-Element, damit diese Lösung funktioniert.</p>
   </main>
   <aside>
      <h2>aside</h2>
   </aside>
   <footer role="contentinfo">
      <h2>footer</h2>
   </footer>

Das CSS dazu könnte dann so aussehen:

   @media all {
      nav {
         float: left;
         width: 30%;
      }
      main {
         float: right;
         width: 70%;
      }
      aside {
         float: right;
         width: 30%;
      }
      footer {
         float: left;
         width: 100%;
      }
   }
   @media only screen and (max-width: 800px) {
      nav {
         width: 100%;
      }
      main {
         width: 100%;
      }
      aside {
         width: 100%;
      }
      footer {
         width: 100%;
      }
   }

Der gesamte Quelltext mit ein paar zusätzlichen CSS-Anweisungen dann so:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Float Layout 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         margin: 0;
      }
      body>* {
         padding: 0.5rem;
         border: 3px solid gray;
         margin: 0;
      }
      nav {
         float: left;
         width: 30%;
      }
      main {
         float: right;
         width: 70%;
      }
      aside {
         float: right;
         width: 30%;
      }
      footer {
         float: left;
         width: 100%;
      }
   }
   @media only screen and (max-width: 800px) {
      nav {
         width: 100%;
      }
      main {
         width: 100%;
      }
      aside {
         width: 100%;
      }
      footer {
         width: 100%;
      }
   }

   </style>
</head>
<body>
   <nav role="navigation">
      <h2>nav</h2>
   </nav>
   <main role="main">
      <h2>main</h2>
      <p>Und noch etwas Text</p>
      <p>Das main-Element muss höher sein als das nav-Element, damit diese Lösung funktioniert.</p>
   </main>
   <aside>
      <h2>aside</h2>
   </aside>
   <footer role="contentinfo">
      <h2>footer</h2>
   </footer>
</body>
</html>

Gruss

MrMurphy

Beitrag melden
–
Informationen zu den Bewertungsregeln