Add a top bar to a three-column flexbox layout - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Column

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Column

Description

Add a top bar to a three-column flexbox layout

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>The 3 Column Flex Layout</title> 
  <style>
body {<!--   ww w  .j  av  a 2 s.c o  m-->
   margin:0;
}

header,
footer,
.content {
   display:flex;
}

.content {
   justify-content:space-between;
   height:76vh;
   max-width:1501px;
   margin:auto;
}

.main {
   flex:0 0 71.6%;
   display:flex;
   flex-wrap:wrap;
}

.top {
   flex:0 0 100%;
   background-color:Chartreuse;
   color:yellow;
}

.secondary {
   background-color:blue;
   flex:0 0 26%;
   order:2;
}

.article {
   background-color:pink;
   flex:2;
   order:3;
}

.primary {
   flex:0 0 28%;
   background-color:WhiteSmoke;
}
</style> 
 </head> 
 <body translate="no"> 
  <header> 
   <h1>This is a Header Location</h1> 
  </header> 
  <div class="content"> 
   <main class="main"> 
    <div class="top">
      The Top area 
    </div> 
    <aside class="secondary">
      The secondary Sidebar 
    </aside> 
    <article class="article"></article> 
   </main> 
   <aside class="primary">
     The Primary Sidebar 
   </aside> 
  </div> 
  <footer class="footer">
    The Footer Area 
  </footer>  
 </body>
</html>

Related Tutorials