Search code examples
csscheckboxcalculated-columns

Website with "3 columns and 4 states" in CSS only

The page should have three columns: left menu, content and right menu. Both menus should be able to be hidden (using the Checkbox Hack) while the content then takes up the space. The whole page should have a maximum width of 1000px.

I've come a long way, but now I'm stuck. The three columns result in 4 states:

  1. left - content - right (250 - 500 - 250)
  2. left - content (250 - 750)
  3. content - right (750 - 250)
  4. content (1000)

With 1 and 2, the content has to be larger by the width of the hidden column, for which I use "calc(100% + 250px)".
But how do I do that when both page columns are hidden, the content occupies the full width of the page?
Also, the page width limitation doesn't work, but that's not that important yet.

:root {
  --darkgrey: darkgrey;
  --almostwhite: #fcfcfc;
  --almostwhite_font: #fcfcfc;
  --lightgrey: lightgrey;
  --blue: blue;
  --darkgrey_font: #404040;
  --lightgrey_1: #e3e3e3;
}

.red {
  color: red;
  padding: 15px;
}

.toggle-links {
  margin: auto;
  width: 50%;
}


/* ═══════════════════════════════════╝ Wrapper ╚══════════ */

body {
  max-width: 960px;
  margin-left: 0px;
  padding-left: 0px;
}


/* ═══════════════════════════════════╗ Wrapper ╔══════════ */


/* ═══════════════════════════════════╝ Header ╚══════════ */

.header {
  position: fixed;
  /* display: block;  */
  width: 250px;
  height: 120px;
  left: 0px;
  top: 0px;
  padding: 0px;
  color: var(--almostwhite_font);
  /* z-index: 200; */
  background-color: var(--darkgrey);
}

a.header_link {
  position: absolute;
  top: 5px;
  left: 25px;
  font-size: 30pt;
  font-weight: normal;
  text-align: left;
  color: var(--almostwhite);
}

.header .searchbox {
  position: fixed;
  margin-top: 65px;
  padding-left: 15px;
}


/* ═══════════════════════════════════╗ Header ╔══════════ */


/* ═══════════════════════════════════╝ three columns ╚══════════ */

.left_column {
  box-sizing: border-box;
  position: fixed;
  background: var(--darkgrey);
  overflow: scroll;
  scrollbar-width: none;
}

.center_column {
  box-sizing: border-box;
  position: fixed;
  overflow: scroll;
  scrollbar-width: none;
  /* margin: 0 auto; */
  border: solid 1px darkred;
}

.right_column {
  box-sizing: border-box;
  position: fixed;
  background: var(--darkgrey);
  overflow: scroll;
  scrollbar-width: none;
}


/* ═══════════════════════════════════╝ Small View ╚══════════ */

.left_column {
  height: 100%;
  width: 250px;
  left: -250px;
  top: 120px;
}

.center_column {
  height: 100%;
  width: calc(100% - 0px);
  left: 0px;
  top: 0px;
  padding: 25px 10px 10px 10px;
}

.right_column {
  height: 100%;
  width: 250px;
  left: calc(100% + 250px);
  top: 0px;
  padding-top: 120px;
}


/* ═══════════════════════════════════╗ Small View ╔══════════ */


/* ═══════════════════════════════════╝ Medium View ╚══════════ */

@media screen and (min-width: 900px) {
  .left_column {
    height: 100%;
    width: 250px;
    left: 0px;
    top: 120px;
  }
  .center_column {
    height: 100%;
    width: calc(100% - 250px);
    left: 250px;
    top: 0px;
    padding: 25px 10px 10px 10px;
  }
  .right_column {
    height: 100%;
    width: 250px;
    left: calc(100% + 250px);
    top: 0px;
    padding-top: 120px;
  }
}


/* ═══════════════════════════════════╗ Medium View ╔══════════ */


/* ═══════════════════════════════════╝ Large View ╚══════════ */

@media screen and (min-width: 1140px) {
  .left_column {
    height: 100%;
    width: 250px;
    left: 0px;
    top: 120px;
  }
  .center_column {
    height: 100%;
    width: calc(100% - 500px);
    left: 250px;
    top: 0px;
    padding: 25px 10px 10px 10px;
  }
  .right_column {
    height: 100%;
    width: 250px;
    left: calc(100% - 250px);
    top: 0px;
    padding-top: 120px;
  }
}


/* ═══════════════════════════════════╗ Large View ╔══════════ */


/* ═══════════════════════════════════╗ three columns ╔══════════ */


/* ═══════════════════════════════════╝ Switches ╚══════════ */

input.hidden {
  display: none;
}

div.left_column {
  display: block;
}

input[type=checkbox]#toggle_left_column:checked~div.left_column {
  display: none;
}

input[type=checkbox]#toggle_left_column:checked~div.center_column {
  left: 0px;
  width: calc(100% - 250px);
}

div.right_column {
  display: block;
}

input[type=checkbox]#toggle_right_column:checked~div.right_column {
  display: none
}

input[type=checkbox]#toggle_right_column:checked~div.center_column {
  left: 250px;
  width: calc(100% - 250px);
}


/* ═══════════════════════════════════╗ Switches ╔══════════ */
<body>
  <!-- switches -->
  <input type="checkbox" id="toggle_left_column" class="hidden">
  <input type="checkbox" id="toggle_right_column" class="hidden">
  <!-- switches -->

  <div class="left_column">

    <div class="header">
      <a href="header_link" class="header_link">mySite</a>
      <div class="searchbox">
        <form><input type="search" /></form>
      </div>
    </div>

    <div id="menu">
      <h3>Menu 1</h3>
      <ul>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
      </ul>
    </div>

  </div>
  <!-- left_column -->




  <div class="right_column">
    <div id="menu2">
      <h3>Menu 2</h3>
      <ul>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
      </ul>
    </div>
  </div>
  <!-- right_column -->


  <div class="center_column">

    <!-- just for testing -->
    <div class="toggle-links">
      <label class="red" for="toggle_left_column">toggle left side</label>
      <label class="red" for="toggle_right_column">toggle right side</label>
    </div>
    <!-- just for testing -->

    <div id="content">
      <h2>Content</h2>
      <p></p>
    </div>
  </div>
  <!-- center_column -->


</body>

Solution

  • My solution:

    div{scrollbar-width:none;}
label {padding:.5em;font-weight: bold; font-size:120%;}
body {max-width: 1200px;margin:0px;}
a{text-decoration: none;}
#header{position:fixed; width: 250px; height:140px;  background-color: #191970;}
#header a{color: #F8F8F8;font-size: 30pt; font-weight: normal; text-align: left; padding: 10px; font-family: "Bree Serif";}
#center_content{top:22px;
    /* position:absolute;top:0px;bottom:0px; max-width:700px;  */
    background-color: DarkRed;overflow-y:auto;}
#full_left_side{}
#left_menu{position:fixed;width:250px;top:140px;bottom:40px;overflow-y:auto; background-color: green;}
#footer{position:fixed;width:250px;bottom:0;height:40px; background-color: DarkViolet;}

#right_menu{position:fixed;width:250px;top:22px;bottom:0px;overflow-y:auto; background-color: DarkOrange;}


.hidden {position:absolute;right:100vw}
li{list-style:none; line-height: 1.3;}
ul{padding-left:10px;}

div.grid {display:grid;grid-template-rows:1fr 0 ;overflow:hidden;}
/* .grid_item{box-shadow:inset 0 0 0 1px;margin:0em;height:100%;overflow:hidden;} */

.label_left_content_right,.label_left_content, .label_content_right, .label_content{display:none;}

/* show all: LCR */
/* minmax(0, 1fr) */
#left_content_right:checked ~div{grid-template-columns:250px 1fr 250px;}
#left_content_right:checked ~div.grid>.grid_item>div.toggle_left>label.label_content_right{display:inline;}
#left_content_right:checked ~div.grid>.grid_item>div.toggle_right>label.label_left_content{display:inline;}

/* show: content & right CR */
#content_right:checked ~div{grid-template-columns:0px 1fr 250px;}
#content_right:checked ~div.grid>.grid_item>div.toggle_center>label.label_left_content_right{display:inline;}
#content_right:checked ~div.grid>.grid_item>div.toggle_right>label.label_content{display:inline;}

#content_right:checked ~div.grid>.grid_item>div#header{left:-300px;}
#content_right:checked ~div.grid>.grid_item>div#left_menu{left:-300px;}
#content_right:checked ~div.grid>.grid_item>div#footer{left:-300px;}


/* show: left & content LC */
#left_content:checked ~div{grid-template-columns:250px 1fr 0px;}
#left_content:checked ~div.grid>.grid_item>div.toggle_center>label.label_left_content_right{display:inline;}
#left_content:checked ~div.grid>.grid_item>div.toggle_left>label.label_content{display:inline;}

#left_content:checked ~div.grid>.grid_item>div#right_menu{right:-300px;}


/* show: content C */
#content:checked ~div{grid-template-columns:0px 1fr 0px;}
#content:checked ~div.grid>.grid_item>div.toggle_center>label.label_left_content{display:inline;}
#content:checked ~div.grid>.grid_item>div.toggle_center>label.label_content_right{display:inline;}

#content:checked ~div.grid>.grid_item>div#header{left:-300px;}
#content:checked ~div.grid>.grid_item>div#left_menu{left:-300px;}
#content:checked ~div.grid>.grid_item>div#footer{left:-300px;}

#content:checked ~div.grid>.grid_item>div#right_menu{right:-300px;}
    <body>

  <span class="hidden">LCR</span><input class="hidden" type="radio" name="grid" id="left_content_right" checked>
  <span class="hidden">LC</span> <input class="hidden" type="radio" name="grid" id="left_content">
  <span class="hidden">CR</span> <input class="hidden" type="radio" name="grid" id="content_right">
  <span class="hidden">C</span>  <input class="hidden" type="radio" name="grid" id="content">

  <div class="grid">

    <div id="full_left_side" class="grid_item"><!-- left BOX -->

      <div class="toggle_left">
        <label class="label_left_content_right" for="left_content_right">LCR</label>
        <label class="label_content_right" for="content_right">CR</label>
        <label class="label_content" for="content">C</label>
      </div>

      <div id="header">
        <a href="#" class="header_link">PageName</a>
      </div>

      <div id="left_menu">
        <h3>Menu 1</h3>
        <ul>
            <li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li>
        </ul>
      </div>

      <div id="footer">
        <a href="#" class="footer_link">Footer1 </a>
        <a href="#" class="footer_link">Footer2 </a>
        <a href="#" class="footer_link">Footer3</a>
      </div>
    </div><!-- left BOX -->

    <div class="grid_item"><!-- center BOX -->
      <div class="toggle_center">
        <label>_</label>
        <label class="label_left_content_right" for="left_content_right">LCR</label>
        <label class="label_left_content" for="left_content">LC</label>
        <label class="label_content_right" for="content_right">CR</label>
      </div>

      <div id="center_content">
        <h1>Content</h1>
        <p>
            Lorem ipsum dolor sit ame<br>t, consetetur sadi<br>pscing elitr, sed diam nonumy eirm<br>od tempor invidunt ut labore et<br>dolore magna aliquyam erat<br>, sed diam voluptua.<br> At vero eos et accusam et justo<br> duo dolores et ea rebum.<br>Stet clita kasd gubergren,<br> no sea takimata sa<br>nctus est Lorem ipsum dolor sit am<br>t. Lorem ipsum dolor sit am<br>et,consetetur sadipscing elitr, sed diam nonumy<br> eirmod tempor invidunt ut labore et dolore magna aliquyam erat,<br>sed diam voluptua. At ver<br>o eos et accusa<br>m et justo duo dolores et ea rebum. Stet clita kasd gubergren,<br>no sea takimata sanctus est Lorem ipsum <br>dolor sit amet.<br>          dolore magna aliquyam erat<br>, sed diam voluptua.<br> At vero eos et accusam et justo<br> duo dolores et ea rebum.<br>Stet clita kasd gubergren,<br> no sea takimata sa<br>nctus est Lorem ipsum dolor sit am<br>t. Lorem ipsum dolor sit am<br>et,consetetur sadipscing elitr, sed diam nonumy<br> eirmod tempor invidunt ut labore et dolore magna aliquyam erat,<br>sed diam voluptua. At ver<br>o eos et accusa<br>m et justo duo dolores et ea rebum. Stet clita kasd gubergren,<br>no sea takimata sanctus est Lorem ipsum <br>dolor sit amet.<br>          dolore magna aliquyam erat<br>, sed diam voluptua.<br> At vero eos et accusam et justo<br> duo dolores et ea rebum.<br>Stet clita kasd gubergren,<br> no sea takimata sa<br>nctus est Lorem ipsum dolor sit am<br>t. Lorem ipsum dolor sit am<br>et,consetetur sadipscing elitr, sed diam nonumy<br> eirmod tempor invidunt ut labore et dolore magna aliquyam erat,<br>sed diam voluptua. At ver<br>o eos et accusa<br>m et justo duo dolores et ea rebum. Stet clita kasd gubergren,<br>no sea takimata sanctus est Lorem ipsum <br>dolor sit amet.<br>          dolore magna aliquyam erat<br>, sed diam voluptua.<br> At vero eos et accusam et justo<br> duo dolores et ea rebum.<br>Stet clita kasd gubergren,<br> no sea takimata sa<br>nctus est Lorem ipsum dolor sit am<br>t. Lorem ipsum dolor sit am<br>et,consetetur sadipscing elitr, sed diam nonumy<br> eirmod tempor invidunt ut labore et dolore magna aliquyam erat,<br>sed diam voluptua. At ver<br>o eos et accusa<br>m et justo duo dolores et ea rebum. Stet clita kasd gubergren,<br>no sea takimata sanctus est Lorem ipsum <br>dolor sit amet.<br>
        </p>
      </div>
    </div><!-- center BOX -->

    <div class="grid_item"><!-- right BOX -->
      <div class="toggle_right">
        <label class="label_left_content_right" for="left_content_right">LCR</label>
        <label class="label_left_content" for="left_content">LC</label>
        <label class="label_content" for="content">C</label>
      </div>
      <div id="right_menu">
        <h3>Menu 2</h3>
        <ul>
            <li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li><li> item </li>
        </ul>
      </div>
    </div><!-- right BOX -->

  </div> <!-- grid -->
</body>