Horizontal Panels

Simple demo of horizontal "panels" layout.

by the_voder

HTML

<div id="wrapper">
  <div id="panelcontainer">
    <section class="panel">
      <div class="panelcontent">
        <h2>Section 1</h2>
        <p>Content of section</p>
      </div>
    </section>
    <section class="panel">
      <div class="panelcontent">
        <h2>Section 2</h2>
        <p>Content of section</p>
      </div>
    </section>
    <section class="panel">
      <div class="panelcontent">
        <h2>Section 3</h2>
        <p>Content of section</p>
      </div>
    </section>
  </div>
</div>

CSS

html,
body {
  margin: 0;
}

#wrapper {
  margin 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

#panelcontainer {
  /* Make container Flexbox parent */
  display: flex;
  margin: 0;
  padding: 0;
  height: 100vh;
  /* 100 x number of panels */
  width: 300vw;
  background-color: #eee;
}

.panel {
  /* We can centre content inside the panel element by making it a Flex parent */  
  display: flex;
  /* Place child elements at center */
  justify-content: center;
  align-items: center;
  margin: 0;
  /* Since panels are also Flex children, we can use 'flex-grow' to make them automatocally grow to fill the space available */
  flex-grow: 1;
  /* Prevent overflowing content from producing scrollbars on panel elements */
  overflow: hidden;
  border: dashed 2px #bbb;
}

/* Applies to even siblings (2-4-6 etc.) */
.panel:nth-child(even) {
  background-color: #ddd;
}