From 31a94ffcb2a56cee244e006899234ed713ec9890 Mon Sep 17 00:00:00 2001
From: wbamberg <will@bootbonnet.ca>
Date: Thu, 26 Oct 2023 08:59:04 -0700
Subject: [PATCH] Fix 29110: use a less confusing class name (#665)

The learning area half of https://github.com/mdn/content/pull/29125.

2 commits:

-
https://github.com/mdn/learning-area/commit/a6e5e10244abdf7147e0146eee1e305a8201fd37:
only Prettier formatting
-
https://github.com/mdn/learning-area/commit/0d0a2ca177606c0fa259a3a1e2065ef6bcdf5583:
substantive changes
---
 .../fixed-info-box.html                       | 377 ++++++++++--------
 .../hidden-info-panel-start.html              |  55 +--
 .../hidden-info-panel.html                    | 135 ++++---
 .../info-box-start.html                       |  96 +++--
 .../info-box.html                             | 308 +++++++-------
 5 files changed, 516 insertions(+), 455 deletions(-)
diff --git a/css/css-layout/practical-positioning-examples/fixed-info-box.html b/css/css-layout/practical-positioning-examples/fixed-info-box.html
index 6bfeb7220..ad845b8b9 100644
--- a/css/css-layout/practical-positioning-examples/fixed-info-box.html
+++ b/css/css-layout/practical-positioning-examples/fixed-info-box.html
@@ -1,177 +1,212 @@
 <!DOCTYPE html>
 <html lang="en-us">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
     <title>Fixed tabbed info box</title>
-  <style>
-
-  /* General setup */
-
-  html {
-    font-family: sans-serif;
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  body {
-    margin: 0;
-  }
-
-  /* info-box setup */
-
-  .info-box {
-    width: 452px;
-    height: 400px;
-    margin: 0 auto;
-    position: fixed;
-    top: 0;
-  }
-
-  /* styling info-box list */
-
-  .info-box ul {
-    border: 1px solid #b60000;
-    overflow: hidden;
-    height: 50px;
-    margin: 0;
-    padding: 0;
-  }
-
-  .info-box li {
-    float: left;
-    list-style-type: none;
-    width: 150px;
-  }
-
-  .info-box li a {
-    display: inline-block;
-    text-decoration: none;
-    width: 100%;
-    line-height: 3;
-    background: white;
-    color: #b60000;
-    text-align: center;
-    font-weight: bold;
-  }
-
-  .info-box li a:focus, li a:hover {
-    background-color: #b60000;
-    color: white;
-  }
-
-  .info-box li a.active {
-    background-color: #b60000;
-    color: white;
-  }
-
-  /* styling info-box tabs */
-
-  .info-box .panels {
-    clear: both;
-    position: relative;
-    height: 352px;
-  }
-
-  .info-box article {
-    background-color: #b60000;
-    color: white;
-    position: absolute;
-    padding: 10px 20px;
-    height: 352px;
-    top: 0;
-    left: 0;
-  }
-
-  .info-box .active-panel {
-    z-index: 1;
-  }
-
-  /* Styling our fake content */
-
-  .fake-content {
-    background-color: #a60000;
-    color: white;
-    padding: 10px;
-    height: 2000px;
-    margin-left: 470px;
-  }
-</style>
+    <style>
+      /* General setup */
+
+      html {
+        font-family: sans-serif;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+      }
+
+      /* info-box setup */
+
+      .info-box {
+        width: 452px;
+        height: 400px;
+        margin: 0 auto;
+        position: fixed;
+        top: 0;
+      }
+
+      /* styling info-box list */
+
+      .info-box ul {
+        border: 1px solid #b60000;
+        overflow: hidden;
+        height: 50px;
+        margin: 0;
+        padding: 0;
+      }
+
+      .info-box li {
+        float: left;
+        list-style-type: none;
+        width: 150px;
+      }
+
+      .info-box li a {
+        display: inline-block;
+        text-decoration: none;
+        width: 100%;
+        line-height: 3;
+        background: white;
+        color: #b60000;
+        text-align: center;
+        font-weight: bold;
+      }
+
+      .info-box li a:focus,
+      li a:hover {
+        background-color: #b60000;
+        color: white;
+      }
+
+      .info-box li a.active-tab {
+        background-color: #b60000;
+        color: white;
+      }
+
+      /* styling info-box tabs */
+
+      .info-box .panels {
+        clear: both;
+        position: relative;
+        height: 352px;
+      }
+
+      .info-box article {
+        background-color: #b60000;
+        color: white;
+        position: absolute;
+        padding: 10px 20px;
+        height: 352px;
+        top: 0;
+        left: 0;
+      }
+
+      .info-box .active-panel {
+        z-index: 1;
+      }
+
+      /* Styling our fake content */
+
+      .fake-content {
+        background-color: #a60000;
+        color: white;
+        padding: 10px;
+        height: 2000px;
+        margin-left: 470px;
+      }
+    </style>
   </head>
-<body>
-
-<section class="fake-content">
-  <h1>Fake content</h1>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-</section>
-
-<section class="info-box">
-  <ul>
-    <li><a href="#" class="active">Tab 1</a></li>
-    <li><a href="#">Tab 2</a></li>
-    <li><a href="#">Tab 3</a></li>
-  </ul>
-  <div class="panels">
-    <article class="active-panel">
-      <h2>The first tab</h2>
-
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
-    </article>
-    <article>
-      <h2>The second tab</h2>
-
-      <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
-    </article>
-    <article>
-      <h2>The third tab</h2>
-
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>
-
-      <ol>
-        <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
-        <li>Aliquam ut porttitor urna.</li>
-        <li>Nulla facilisi</li>
-      </ol>
-    </article>
-  </div>
-</section>
-
-<script>
-
-var tabs = document.querySelectorAll('.info-box li a');
-var panels = document.querySelectorAll('.info-box article');
-
-for(i = 0; i < tabs.length; i++) {
-  var tab = tabs[i];
-  setTabHandler(tab, i);
-}
-
-function setTabHandler(tab, tabPos) {
-  tab.onclick = function() {
-    for(i = 0; i < tabs.length; i++) {
-      tabs[i].className = '';
-    }
-
-    tab.className = 'active';
-
-    for(i = 0; i < panels.length; i++) {
-      panels[i].className = '';
-    }
-
-    panels[tabPos].className = 'active-panel';
-  }
-}
-
-</script>
-
-</body>
+  <body>
+    <section class="fake-content">
+      <h1>Fake content</h1>
+      <p>
+        This is fake content. Your main web page contents would probably go
+        here.
+      </p>
+      <p>
+        This is fake content. Your main web page contents would probably go
+        here.
+      </p>
+      <p>
+        This is fake content. Your main web page contents would probably go
+        here.
+      </p>
+      <p>
+        This is fake content. Your main web page contents would probably go
+        here.
+      </p>
+      <p>
+        This is fake content. Your main web page contents would probably go
+        here.
+      </p>
+      <p>
+        This is fake content. Your main web page contents would probably go
+        here.
+      </p>
+      <p>
+        This is fake content. Your main web page contents would probably go
+        here.
+      </p>
+      <p>
+        This is fake content. Your main web page contents would probably go
+        here.
+      </p>
+    </section>
+
+    <section class="info-box">
+      <ul>
+        <li><a href="#" class="active-tab">Tab 1</a></li>
+        <li><a href="#">Tab 2</a></li>
+        <li><a href="#">Tab 3</a></li>
+      </ul>
+      <div class="panels">
+        <article class="active-panel">
+          <h2>The first tab</h2>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in
+            augue. Vestibulum et orci scelerisque, vulputate tellus quis,
+            lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec
+            nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus
+            consequat aliquet, dui neque eleifend lorem, a auctor libero turpis
+            at sem. Aliquam ut porttitor urna. Nulla facilisi.
+          </p>
+        </article>
+        <article>
+          <h2>The second tab</h2>
+
+          <p>
+            This tab hasn't got any Lorem Ipsum in it. But the content isn't
+            very exciting all the same.
+          </p>
+        </article>
+        <article>
+          <h2>The third tab</h2>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in
+            augue. And now an ordered list: how exciting!
+          </p>
+
+          <ol>
+            <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
+            <li>Aliquam ut porttitor urna.</li>
+            <li>Nulla facilisi</li>
+          </ol>
+        </article>
+      </div>
+    </section>
+
+    <script>
+      var tabs = document.querySelectorAll(".info-box li a");
+      var panels = document.querySelectorAll(".info-box article");
+
+      for (i = 0; i < tabs.length; i++) {
+        var tab = tabs[i];
+        setTabHandler(tab, i);
+      }
+
+      function setTabHandler(tab, tabPos) {
+        tab.onclick = function () {
+          for (i = 0; i < tabs.length; i++) {
+            tabs[i].className = "";
+          }
+
+          tab.className = "active-tab";
+
+          for (i = 0; i < panels.length; i++) {
+            panels[i].className = "";
+          }
+
+          panels[tabPos].className = "active-panel";
+        };
+      }
+    </script>
+  </body>
 </html>
diff --git a/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html b/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html
index d9d8dcd5c..551afb201 100644
--- a/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html
+++ b/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html
@@ -1,33 +1,36 @@
 <!DOCTYPE html>
 <html lang="en-us">
   <head>
-	<meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
-	<title>Hidden info panel</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Hidden info panel</title>
 
-  <style>
-    
-  </style>
-	
+    <style></style>
   </head>
-<body>
+  <body>
+    <label for="toggle">❔</label>
+    <input type="checkbox" id="toggle" />
+    <aside>
+      <h2>Information</h2>
 
+      <p>Some very important information about your app:</p>
 
-  <label for="toggle">❔</label>
-  <input type="checkbox" id="toggle">
-  <aside>
-    <h2>Information</h2>
-
-    <p>Some very important information about your app:</p>
-
-    <ol>
-      <li>It has a really cool slide-out information box.</li>
-      <li>This information box uses a combination of fixed positioning and a CSS transition for the smooth sliding.</li>
-      <li>It also uses a cool technique called the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>.</li>
-      <li>This allows you to create a nice "toggle on/toggle off" UI effect without using any JavaScript, which will work in IE9 and above (the smooth transition will work in IE10 and above.)</li>
-
-    </ol>
-
-  </aside>
-</body>
-</html>
\ No newline at end of file
+      <ol>
+        <li>It has a really cool slide-out information box.</li>
+        <li>
+          This information box uses a combination of fixed positioning and a CSS
+          transition for the smooth sliding.
+        </li>
+        <li>
+          It also uses a cool technique called the
+          <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>.
+        </li>
+        <li>
+          This allows you to create a nice "toggle on/toggle off" UI effect
+          without using any JavaScript, which will work in IE9 and above (the
+          smooth transition will work in IE10 and above.)
+        </li>
+      </ol>
+    </aside>
+  </body>
+</html>
diff --git a/css/css-layout/practical-positioning-examples/hidden-info-panel.html b/css/css-layout/practical-positioning-examples/hidden-info-panel.html
index 5a6f2647f..7d8e38786 100644
--- a/css/css-layout/practical-positioning-examples/hidden-info-panel.html
+++ b/css/css-layout/practical-positioning-examples/hidden-info-panel.html
@@ -1,70 +1,75 @@
 <!DOCTYPE html>
 <html lang="en-us">
   <head>
-	<meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
-	<title>Hidden info panel</title>
-
-  <style>
-    /* || Checkbox hack to control information box display */
-
-    label[for="toggle"] {
-      font-size: 3rem;
-      position: absolute;
-      top: 4px;
-      right: 5px;
-      z-index: 1;
-      cursor: pointer;
-    }
-
-    input[type="checkbox"] {
-       position: absolute;
-       top: -100px;
-    }
-
-    /* information box styling */
-
-    aside {
-      background-color: #a60000;
-      color: white;
-
-      width: 340px;
-      height: 100%;
-      padding: 0 20px;
-
-      position: fixed;
-      top: 0;
-      right: -370px;
-
-      transition: 0.6s all;
-    }
-
-    /* Second part of the checkbox hack — the checked state */
-
-    input[type=checkbox]:checked + aside {
-      right: 0px;
-    }
-  </style>
-
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Hidden info panel</title>
+
+    <style>
+      /* || Checkbox hack to control information box display */
+
+      label[for="toggle"] {
+        font-size: 3rem;
+        position: absolute;
+        top: 4px;
+        right: 5px;
+        z-index: 1;
+        cursor: pointer;
+      }
+
+      input[type="checkbox"] {
+        position: absolute;
+        top: -100px;
+      }
+
+      /* information box styling */
+
+      aside {
+        background-color: #a60000;
+        color: white;
+
+        width: 340px;
+        height: 100%;
+        padding: 0 20px;
+
+        position: fixed;
+        top: 0;
+        right: -370px;
+
+        transition: 0.6s all;
+      }
+
+      /* Second part of the checkbox hack — the checked state */
+
+      input[type="checkbox"]:checked + aside {
+        right: 0px;
+      }
+    </style>
   </head>
-<body>
-
-
-  <label for="toggle">❔</label>
-  <input type="checkbox" id="toggle">
-  <aside>
-    <h2>Information</h2>
-
-    <p>Some very important information about your app:</p>
-
-    <ol>
-      <li>It has a really cool slide-out information box.</li>
-      <li>This information box uses a combination of fixed positioning and a CSS transition for the smooth sliding.</li>
-      <li>It also uses a cool technique called the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>.</li>
-      <li>This allows you to create a nice "toggle on/toggle off" UI effect without using any JavaScript, which will work in IE9 and above (the smooth transition will work in IE10 and above.)</li>
-
-    </ol>
-
-  </aside>
-</body>
+  <body>
+    <label for="toggle">❔</label>
+    <input type="checkbox" id="toggle" />
+    <aside>
+      <h2>Information</h2>
+
+      <p>Some very important information about your app:</p>
+
+      <ol>
+        <li>It has a really cool slide-out information box.</li>
+        <li>
+          This information box uses a combination of fixed positioning and a CSS
+          transition for the smooth sliding.
+        </li>
+        <li>
+          It also uses a cool technique called the
+          <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>.
+        </li>
+        <li>
+          This allows you to create a nice "toggle on/toggle off" UI effect
+          without using any JavaScript, which will work in IE9 and above (the
+          smooth transition will work in IE10 and above.)
+        </li>
+      </ol>
+    </aside>
+  </body>
 </html>
diff --git a/css/css-layout/practical-positioning-examples/info-box-start.html b/css/css-layout/practical-positioning-examples/info-box-start.html
index 601f2eec7..f04060960 100644
--- a/css/css-layout/practical-positioning-examples/info-box-start.html
+++ b/css/css-layout/practical-positioning-examples/info-box-start.html
@@ -1,48 +1,58 @@
 <!DOCTYPE html>
 <html lang="en-us">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
     <title>Tabbed info box</title>
-  <style></style>
+    <style></style>
   </head>
-<body>
-
-<section class="info-box">
-  <ul>
-    <li><a href="#" class="active">Tab 1</a></li>
-    <li><a href="#">Tab 2</a></li>
-    <li><a href="#">Tab 3</a></li>
-  </ul>
-  <div class="panels">
-    <article class="active-panel">
-      <h2>The first tab</h2>
-
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
-    </article>
-    <article>
-      <h2>The second tab</h2>
-
-      <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
-    </article>
-    <article>
-      <h2>The third tab</h2>
-
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>
-
-      <ol>
-        <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
-        <li>Aliquam ut porttitor urna.</li>
-        <li>Nulla facilisi</li>
-      </ol>
-    </article>
-  </div>
-</section>
-
-<script>
-
-
-</script>
-  
-</body>
-</html>
\ No newline at end of file
+  <body>
+    <section class="info-box">
+      <ul>
+        <li><a href="#" class="active-tab">Tab 1</a></li>
+        <li><a href="#">Tab 2</a></li>
+        <li><a href="#">Tab 3</a></li>
+      </ul>
+      <div class="panels">
+        <article class="active-panel">
+          <h2>The first tab</h2>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in
+            augue. Vestibulum et orci scelerisque, vulputate tellus quis,
+            lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec
+            nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus
+            consequat aliquet, dui neque eleifend lorem, a auctor libero turpis
+            at sem. Aliquam ut porttitor urna. Nulla facilisi.
+          </p>
+        </article>
+        <article>
+          <h2>The second tab</h2>
+
+          <p>
+            This tab hasn't got any Lorem Ipsum in it. But the content isn't
+            very exciting all the same.
+          </p>
+        </article>
+        <article>
+          <h2>The third tab</h2>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in
+            augue. And now an ordered list: how exciting!
+          </p>
+
+          <ol>
+            <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
+            <li>Aliquam ut porttitor urna.</li>
+            <li>Nulla facilisi</li>
+          </ol>
+        </article>
+      </div>
+    </section>
+
+    <script></script>
+  </body>
+</html>
diff --git a/css/css-layout/practical-positioning-examples/info-box.html b/css/css-layout/practical-positioning-examples/info-box.html
index 7b59cf3fe..31c7d1555 100644
--- a/css/css-layout/practical-positioning-examples/info-box.html
+++ b/css/css-layout/practical-positioning-examples/info-box.html
@@ -1,156 +1,164 @@
 <!DOCTYPE html>
 <html lang="en-us">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
     <title>Tabbed info box</title>
-  <style>
-
-  /* General setup */
-
-  html {
-    font-family: sans-serif;
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  body {
-    margin: 0;
-  }
-
-  /* info-box setup */
-
-  .info-box {
-    width: 452px;
-    height: 400px;
-    margin: 20px auto 0;
-  }
-
-  /* styling info-box tabs */
-
-  .info-box ul {
-    border: 1px solid #b60000;
-    overflow: hidden;
-    height: 50px;
-    margin: 0;
-    padding: 0;
-  }
-
-  .info-box li {
-    float: left;
-    list-style-type: none;
-    width: 150px;
-  }
-
-  .info-box li a {
-    display: inline-block;
-    text-decoration: none;
-    width: 100%;
-    line-height: 50px;
-    background: white;
-    color: #b60000;
-    text-align: center;
-    font-weight: bold;
-  }
-
-  .info-box li a:focus, .info-box li a:hover {
-    background-color: #b60000;
-    color: white;
-  }
-
-  .info-box li a.active {
-    background-color: #b60000;
-    color: white;
-  }
-
-  /* styling info-box panels */
-
-  .info-box .panels {
-    clear: both;
-    position: relative;
-    height: 352px;
-  }
-
-  .info-box article {
-    background-color: #b60000;
-    color: white;
-    position: absolute;
-    padding: 10px 20px;
-    height: 352px;
-    top: 0;
-    left: 0;
-  }
-
-  .info-box .active-panel {
-    z-index: 1;
-  }
-
-
-
-  </style>
+    <style>
+      /* General setup */
+
+      html {
+        font-family: sans-serif;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+      }
+
+      /* info-box setup */
+
+      .info-box {
+        width: 452px;
+        height: 400px;
+        margin: 20px auto 0;
+      }
+
+      /* styling info-box tabs */
+
+      .info-box ul {
+        border: 1px solid #b60000;
+        overflow: hidden;
+        height: 50px;
+        margin: 0;
+        padding: 0;
+      }
+
+      .info-box li {
+        float: left;
+        list-style-type: none;
+        width: 150px;
+      }
+
+      .info-box li a {
+        display: inline-block;
+        text-decoration: none;
+        width: 100%;
+        line-height: 50px;
+        background: white;
+        color: #b60000;
+        text-align: center;
+        font-weight: bold;
+      }
+
+      .info-box li a:focus,
+      .info-box li a:hover {
+        background-color: #b60000;
+        color: white;
+      }
+
+      .info-box li a.active-tab {
+        background-color: #b60000;
+        color: white;
+      }
+
+      /* styling info-box panels */
+
+      .info-box .panels {
+        clear: both;
+        position: relative;
+        height: 352px;
+      }
+
+      .info-box article {
+        background-color: #b60000;
+        color: white;
+        position: absolute;
+        padding: 10px 20px;
+        height: 352px;
+        top: 0;
+        left: 0;
+      }
+
+      .info-box .active-panel {
+        z-index: 1;
+      }
+    </style>
   </head>
-<body>
-
-<section class="info-box">
-  <ul>
-    <li><a href="#" class="active">Tab 1</a></li>
-    <li><a href="#">Tab 2</a></li>
-    <li><a href="#">Tab 3</a></li>
-  </ul>
-  <div class="panels">
-    <article class="active-panel">
-      <h2>The first tab</h2>
-
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
-    </article>
-    <article>
-      <h2>The second tab</h2>
-
-      <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
-    </article>
-    <article>
-      <h2>The third tab</h2>
-
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>
-
-      <ol>
-        <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
-        <li>Aliquam ut porttitor urna.</li>
-        <li>Nulla facilisi</li>
-      </ol>
-    </article>
-  </div>
-</section>
-
-<script>
-
-var tabs = document.querySelectorAll('.info-box li a');
-var panels = document.querySelectorAll('.info-box article');
-
-for(i = 0; i < tabs.length; i++) {
-  var tab = tabs[i];
-  setTabHandler(tab, i);
-}
-
-function setTabHandler(tab, tabPos) {
-  tab.onclick = function() {
-    for(i = 0; i < tabs.length; i++) {
-      tabs[i].className = '';
-    }
-
-    tab.className = 'active';
-
-    for(i = 0; i < panels.length; i++) {
-      panels[i].className = '';
-    }
-
-    panels[tabPos].className = 'active-panel';
-  }
-}
-
-</script>
-
-</body>
+  <body>
+    <section class="info-box">
+      <ul>
+        <li><a href="#" class="active-tab">Tab 1</a></li>
+        <li><a href="#">Tab 2</a></li>
+        <li><a href="#">Tab 3</a></li>
+      </ul>
+      <div class="panels">
+        <article class="active-panel">
+          <h2>The first tab</h2>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in
+            augue. Vestibulum et orci scelerisque, vulputate tellus quis,
+            lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec
+            nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus
+            consequat aliquet, dui neque eleifend lorem, a auctor libero turpis
+            at sem. Aliquam ut porttitor urna. Nulla facilisi.
+          </p>
+        </article>
+        <article>
+          <h2>The second tab</h2>
+
+          <p>
+            This tab hasn't got any Lorem Ipsum in it. But the content isn't
+            very exciting all the same.
+          </p>
+        </article>
+        <article>
+          <h2>The third tab</h2>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in
+            augue. And now an ordered list: how exciting!
+          </p>
+
+          <ol>
+            <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
+            <li>Aliquam ut porttitor urna.</li>
+            <li>Nulla facilisi</li>
+          </ol>
+        </article>
+      </div>
+    </section>
+
+    <script>
+      var tabs = document.querySelectorAll(".info-box li a");
+      var panels = document.querySelectorAll(".info-box article");
+
+      for (i = 0; i < tabs.length; i++) {
+        var tab = tabs[i];
+        setTabHandler(tab, i);
+      }
+
+      function setTabHandler(tab, tabPos) {
+        tab.onclick = function () {
+          for (i = 0; i < tabs.length; i++) {
+            tabs[i].className = "";
+          }
+
+          tab.className = "active-tab";
+
+          for (i = 0; i < panels.length; i++) {
+            panels[i].className = "";
+          }
+
+          panels[tabPos].className = "active-panel";
+        };
+      }
+    </script>
+  </body>
 </html>
