Search code examples
htmllayoutflexboxskeleton-css-boilerplatew3.css

Full Height Side Nav Bar moves below main div on small screens w/ Flex or w3.css

Without using fixed elements how can I make the attached layout work for both desktop and mobile with either flex-box or w3.css? The rectangle on the left represents the desktop layout and the one on the right represents how it should look on mobile or narrower media. (no java) two different width media

The header, footer and the sidebar will be sticky or have fixed element-like qualities but won't be fixed. I'm also interested in float solutions but they don't come off as elegant as flexbox. Also interested to hear if bootstrap could solve this more elegantly.

This is what I've got so far, but the side nav/bar is not full height.

body * {
  border: 1px solid black;
}

.flex-container {
  display: -ms-flexbox;
  /* IE10*/
  display: flex;
  -ms-flex-wrap: wrap;
  /*IE10*/
  flex-wrap: wrap;
  padding: 0 15px;
}

.header {
  -ms-flex: 100%;
  /*IE10*/
  flex: 100%;
  height: 70px;
  position: sticky;
  top: 0;
  z-index: +1;
  background-color: rgba(255, 255, 255, 1.00);
}

.aside {
  -ms-flex: 20;
  /*IE10*/
  flex: 20;
  height: 100%;
  position: sticky;
  top: 70px;
  padding: 0 40px 0 0;
}

.main {
  -ms-flex: 80;
  /*IE10*/
  flex: 80;
}

.footer {
  -ms-flex: 100%;
  /*IE10*/
  flex: 100%;
  position: sticky;
  bottom: 0;
  padding: 0 0 5px 0;
  background-color: rgba(255, 255, 255, 1.00);
}

.post {
  display: -ms-flexbox;
  /* IE10*/
  display: flex;
  -ms-flex-wrap: wrap;
  /*IE10*/
  flex-wrap: wrap;
  height: 500px;
  gap: 40px;
}

.post__story {
  -ms-flex: 3;
  /*IE10*/
  flex: 3;
}

.post__slider {
  -ms-flex: 7;
  /*IE10*/
  flex: 7;
}

@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
  .post {
    flex-direction: column;
  }
  .header {
    order: 1;
  }
  .main {
    order: 2;
  }
  .aside {
    order: 3;
  }
  .footer {
    order: 4;
  }
  .navTop,
  .navBottom {
    width: 100%;
  }
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>skeletal</title>
</head>

<body>
  <div class="flex-container">
    <header class="header"> header content </header>
    <aside class="aside"> side bar/nav content
      <div class="asideLeft__container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, enim aliquid hic!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem pariatur, magnam.</p>
        <address class="asideLeft__contact">
        <p>Email</p> <br>
        <p>Twitter</p> <br>
        <p>Github</p>
      </address>
      </div>
    </aside>
    <main class="main">main content
      <section class="post">
        <article class="post__story"> Content for class "post__story" Goes Here
          <p>Content for project story Goes Here</p>
        </article>
        <div class="post__slider"> Content for class "post__slider" Goes Here
          <figure>This is the container for project image
            <figcaption>This is the container for image caption</figcaption>
          </figure>
        </div>
      </section>
      <section class="post">
        <article class="post__story"> Content for class "post__story" Goes Here
          <p>Content for project story Goes Here</p>
        </article>
        <div class="post__slider"> Content for class "post__slider" Goes Here
          <figure>This is the container for project image
            <figcaption>This is the container for image caption</figcaption>
          </figure>
        </div>
      </section>
      <section class="post">
        <article class="post__story"> Content for class "post__story" Goes Here
          <p>Content for project story Goes Here</p>
        </article>
        <div class="post__slider"> Content for class "post__slider" Goes Here
          <figure>This is the container for project image
            <figcaption>This is the container for image caption</figcaption>
          </figure>
        </div>
      </section>
    </main>
    <footer class="footer"> footer content </footer>
  </div>
</body>

</html>

Solution

  • After trying for a while to use flex I found, through this page (CSS tricks), that in this case it is easier to use grid. So this is, based on that example, one way to achieve it:

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>The "grid"  alternative</title>
    
<style> 
.header {
  grid-area: header;
  background-color: hotpink;
  position: sticky;
  top:0;
}

.footer {
  grid-area: footer;
  background-color: deepskyblue;
  position: sticky;
  bottom: 0;
  height: 50px;
}

.sidebar {
  grid-area: sidebar;
  background-color: gold;
}

.main {
  grid-area: main;
  background-color:tomato;
}


.grid {
  font-size: 30px;
  text-align: center;
  display: grid;
  grid-template-columns: 20% 80%;
  grid-template-areas: "sidebar header"
                       "sidebar main"
                       "sidebar footer";
 }
@media (max-width: 800px) {
    .grid{
    grid-template-columns: 100%;
    grid-template-areas: "header"
                         "main"
                         "sidebar"
                         "footer";
 }
 .sidebar { position:sticky;
            bottom:50px; 
 
}
</style>    
</head> 
<body>
<div class="grid">
  <div class="header">Header</div>
  <div class="main">Main
  <p>Post emensos insuperabilis expeditionis eventus languentibus partium animis, 
        quas periculorum varietas fregerat et laborum, nondum tubarum cessante clangore 
        vel milite locato per stationes hibernas, fortunae saevientis procellae tempestates 
        alias rebus infudere communibus per multa illa et dira facinora Caesaris Galli, qui 
        ex squalore imo miseriarum in aetatis adultae primitiis ad principale culmen insperato 
        saltu provectus ultra terminos potestatis delatae procurrens asperitate nimia cuncta
        foedabat. Propinquitate enim regiae stirpis gentilitateque etiam tum Constantini 
        nominis efferebatur in fastus, si plus valuisset, ausurus hostilia in auctorem suae 
        felicitatis, ut videbatur. 2 Cuius acerbitati uxor grave accesserat incentivum, germanitate 
        Augusti turgida supra modum, quam Hannibaliano regi fratris filio antehac Constantinus 
        iunxerat pater, Megaera quaedam mortalis, inflammatrix saevientis adsidua, humani cruoris 
        avida nihil mitius quam maritus; qui paulatim eruditiores facti processu temporis ad nocendum
        per clandestinos versutosque rumigerulos conpertis leviter addere quaedam male suetos falsa et
         placentia sibi discentes, adfectati regni vel artium nefandarum calumnias insontibus adfligebant.
        Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda 
        Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum,
         flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta,
          oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis f
          ormula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui 
          permissus occideretur
    </p></div>
  <div class="sidebar"> Sidebar</div>
   <div class="footer">Footer</div>
</div>
</body>
</html>

    I hope this help you. Saludos.