CSS tab system with 2 lines of tabs - code using "float"

Question

I am using the code below for a form with multiple "tabs", and I would like tabs 1-4 to appear above tabs 5-8, in two lines. However, tabs 1-4 appear normally, but tabs 5-8 are truncated, they do not appear at the bottom line as I would expect them to be "float".

You could help me change the code, so that tabs 5-8 appear below tabs 1-4, as in this image?

Here’s the code:

.nav_tabs{
  width: 500px;
  height: 400px;
  margin: 5px 0;
  position: relative;
}

.nav_tabs ul{
  list-style: none;
}

.nav_tabs ul li{
  float: left;
}

.tab_label{
  display: block;
  width: 100px;
  background-color: #D8D8D8;
  padding: 2px;
  font-size: 16px;
  color:black;
  cursor: pointer;
  border-right: solid 1px #A4A4A4;
  text-align: center;
}

.nav_tabs .rd_tab { 
  display:none;
  position: absolute;
}

.nav_tabs .rd_tab:checked ~ label { 
  background-color: #08298A;
  color:#fff;
  border: none;
}

.tab-content{
  border-top: solid 5px #08298A;
  background-color: #fff;
  display: none;
  position: absolute;
  height: 300px;
  width: 420px;
  left: 40px;	
}

.rd_tab:checked ~ .tab-content{
  display: block;
}

<nav class="nav_tabs">
  <ul>
    <li>
      <input type="radio"  class="rd_tab" id="tab1" name="tabs" checked>
      <label for="tab1" class="tab_label">ABA 1</label>
      <div class="tab-content">
          Conteúdo Aba 1
      </div>
    </li>
    <li>
      <input type="radio" class="rd_tab" id="tab2" name="tabs">
      <label for="tab2" class="tab_label">ABA 2</label>
      <div class="tab-content">  
        Conteúdo Aba 2		
        </div>
    </li>	
    <li>
      <input type="radio" class="rd_tab" id="tab3" name="tabs">
      <label for="tab3" class="tab_label">ABA 3</label>
      <div class="tab-content">  
        Conteúdo Aba 3			
        </div>
    </li>
    <li>
      <input type="radio" class="rd_tab" id="tab4" name="tabs">
      <label for="tab4" class="tab_label">ABA 4</label>
      <div class="tab-content">  
        Conteúdo Aba 4		
      </div>
    </li>
    <li>
      <input type="radio" class="rd_tab" id="tab5" name="tabs">
      <label for="tab5" class="tab_label">ABA 5</label>
      <div class="tab-content">  
        Conteúdo Aba 5		
      </div>
    </li>
    <li>
      <input type="radio" class="rd_tab" id="tab6" name="tabs">
      <label for="tab6" class="tab_label">ABA 6</label>
      <div class="tab-content">  
        Conteúdo Aba 6		
      </div>
    </li> 
    <li>
      <input type="radio" class="rd_tab" id="tab7" name="tabs">
      <label for="tab7" class="tab_label">ABA 7</label>
      <div class="tab-content">  
        Conteúdo Aba 7		
      </div>
    </li> 
    <li>
      <input type="radio" class="rd_tab" id="tab8" name="tabs">
      <label for="tab8" class="tab_label">ABA 8</label>
      <div class="tab-content">  
        Conteúdo Aba 8		
      </div>
    </li> 	
   </ul>
 </nav>

Answer 1

A very simple solution is to separate the UL from the contents and respective checkboxes.

The basis is the example below, I did not stylize for you to clearly see that the content "floats" and works no matter the number of tabs nor lines (I even forced the break with <br> to facilitate understanding):

.aba > input {display:none}
.aba > input + div {display:none}
.aba > input:checked + div {display:block}

<label for="conteudo1">ABA1</label>
<label for="conteudo2">ABA2</label>
<label for="conteudo3">ABA3</label><br>
<label for="conteudo4">ABA4</label>
<label for="conteudo5">ABA5</label>
<label for="conteudo6">ABA6</label><br>
<label for="conteudo7">ABA7</label>
<label for="conteudo8">ABA8</label>
<label for="conteudo9">ABA9</label><br>

<div class="aba"><input type="radio" id="conteudo1" name="abas"><div>Um</div></div>
<div class="aba"><input type="radio" id="conteudo2" name="abas"><div>Dois</div></div>
<div class="aba"><input type="radio" id="conteudo3" name="abas"><div>Tres</div></div>
<div class="aba"><input type="radio" id="conteudo4" name="abas"><div>Quatro</div></div>
<div class="aba"><input type="radio" id="conteudo5" name="abas"><div>Cinco</div></div>
<div class="aba"><input type="radio" id="conteudo6" name="abas"><div>Seis</div></div>
<div class="aba"><input type="radio" id="conteudo7" name="abas"><div>Sete</div></div>
<div class="aba"><input type="radio" id="conteudo8" name="abas"><div>Oito</div></div>
<div class="aba"><input type="radio" id="conteudo9" name="abas"><div>Nove</div></div>

The above code is a very clean base, but since it’s all separate, you’re totally free to style and restructure HTML for virtually any situation. The constraint is not having the selected tab stylized. For this, see below:

Using the selector ~ and styling the selected tab

If you want to style the selected tab, keep the radiobutton next to the tab. In this case, the general selector ~ brotherly help:

.abas input {display:none}
.abas input:checked + label {color:red}
.abas .conteudo {display:none}

#aba1:checked ~ .c1,
#aba2:checked ~ .c2,
#aba3:checked ~ .c3,
#aba4:checked ~ .c4
  {display:block}

<div class="abas">
  <input type="radio" name="abas" id="aba1"><label for="aba1">ABA1</label>
  <input type="radio" name="abas" id="aba2"><label for="aba2">ABA2</label><br>
  <input type="radio" name="abas" id="aba3"><label for="aba3">ABA3</label>
  <input type="radio" name="abas" id="aba4"><label for="aba4">ABA4</label>
  <br>----------<br>
  <div class="conteudo c1">Um</div>
  <div class="conteudo c2">Dois</div>
  <div class="conteudo c3">Tres</div>
  <div class="conteudo c4">Quatro</div>
 </div>

In this case the points "against" are that the divcontent has to be at the same level as inputs, for the selector ~ will not work with nesting, and to avoid too much complexity in the selectors, I preferred to leave each tab with a separate class. It probably wouldn’t be scalable to 1000 tabs in a handmade HTML, but it probably won’t happen in a real situation, and if it does, I’m pretty sure it’s dynamically generating HTML, which simplifies everything.

Answer 2

The bottom list is not being displayed, because the contents of the upper tabs are superimposing them.

Then it will be necessary to the contents out of the ul, but in doing so, it will not be possible to change the visibility of the content using CSS.

Second point, due to a "bug" of float:left, it is necessary to apply a clearfix so that the ul have your size fixed.

The last adjustment was only on the margins of ul, to bring the content of the.

As well as applying a box-sizing to the Honeys to make the edges harmonious.

var atual;
var contents = document.querySelectorAll("[data-tab]")
var onRadioChange = function (event) {
  if (atual) atual.content.classList.toggle("show", atual.radio.checked)
  this.content.classList.toggle("show", this.radio.checked)
  atual = this
};

[].forEach.call(contents, function (content) {
  var obj = {};
  obj.content = content
  obj.radio = document.getElementById(content.dataset.tab)
  obj.radio.addEventListener("change", onRadioChange.bind(obj))
  if (obj.radio.checked) {  
    obj.radio.dispatchEvent(new Event("change"))
  }
})

.nav_tabs{
  width: 500px;
  height: 400px;
  margin: 5px 0;
  position: relative;
}

.nav_tabs ul:before,
.nav_tabs ul:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.nav_tabs ul:after {
    clear: both;
}

.nav_tabs ul{
  margin-bottom: 0px;
  list-style: none;
}

.nav_tabs ul li{  
  float: left;
}

.tab_label{
  box-sizing: border-box;
  display: block;
  width: 105px;
  background-color: #D8D8D8;
  padding: 2px;
  font-size: 16px;
  color:black;
  cursor: pointer;
  border-right: solid 1px #A4A4A4;
  text-align: center;
}

.nav_tabs .rd_tab { 
  display:none;
  position: absolute;
}

.nav_tabs .rd_tab:checked ~ label { 
  background-color: #08298A;
  color:#fff;
  border: none;
}

.tab-content{
  border-top: solid 5px #08298A;
  background-color: #fff;
  display: none;
  position: absolute;
  height: 300px;
  width: 420px;
  left: 40px;	
  margin-bottom: 5px
}

.tab-content.show {
  display: block;
}

<nav class="nav_tabs">  
  <ul>
    <li>    
      <input type="radio"  class="rd_tab" id="tab1" name="tabs" checked>
      <label for="tab1" class="tab_label">ABA 1</label>      
    </li>
    <li>
      <input type="radio" class="rd_tab" id="tab2" name="tabs">
      <label for="tab2" class="tab_label">ABA 2</label>      
    </li>	
    <li>
      <input type="radio" class="rd_tab" id="tab3" name="tabs">
      <label for="tab3" class="tab_label">ABA 3</label>
      
    </li>
    <li>
      <input type="radio" class="rd_tab" id="tab4" name="tabs">
      <label for="tab4" class="tab_label">ABA 4</label>
      
    </li>
    <li>
      <input type="radio" class="rd_tab" id="tab5" name="tabs">
      <label for="tab5" class="tab_label">ABA 5</label>
      
    </li>
    <li>
      <input type="radio" class="rd_tab" id="tab6" name="tabs">
      <label for="tab6" class="tab_label">ABA 6</label>
      
    </li> 
    <li>
      <input type="radio" class="rd_tab" id="tab7" name="tabs">
      <label for="tab7" class="tab_label">ABA 7</label>
      
    </li> 
    <li>
      <input type="radio" class="rd_tab" id="tab8" name="tabs">
      <label for="tab8" class="tab_label">ABA 8</label>      
    </li> 	
   </ul>
   <div class="tab-content" data-tab="tab1">
      Conteúdo Aba 1
   </div>
   <div class="tab-content" data-tab="tab2">  
      Conteúdo Aba 2		
   </div>
   <div class="tab-content" data-tab="tab3">  
      Conteúdo Aba 3			
   </div>
   <div class="tab-content" data-tab="tab4">  
      Conteúdo Aba 4		
   </div>
   <div class="tab-content" data-tab="tab5">  
      Conteúdo Aba 5		
   </div>
   <div class="tab-content" data-tab="tab6">  
      Conteúdo Aba 6		
   </div>
   <div class="tab-content" data-tab="tab7">  
      Conteúdo Aba 7		
   </div>
   <div class="tab-content" data-tab="tab8">  
      Conteúdo Aba 8		
   </div>
 </nav>