Add additional column in row

Question

I have a Slider in my project where I have a large image displaying the image of the current slider, and then right side, a column that contains several miniatures in the form of squares with the function of changing slide, as can be seen in the image below.

But now I would like to add a new column of squares next to it. How can I do that? Here is my code below:

<style type="text/css">
#tv a {
    font-size:16px;
    font-weight:bold;
}

#tv span {
    color:#FFFFFF;
    font-size:12px;
    font-weight:normal;
}

#hid {
    display:none;
    left:-5000px;
    position:absolute;
    top:-5000px;
}

#tv #nav {
    height:291px;
    left:310px;
    overflow:hidden;
    position:absolute;
    top:5px;
    width:50px;
}

#tv #nav img {
    cursor:pointer;
    height:20px;
    margin:0 0 5px;
    width:20px;
}

#tv .opac {
    margin-bottom:5px;
    opacity:1;
}

#tv .transp {
    margin-bottom:5px;
    opacity:0.1;
}


#tv img {
    display:block;
    margin-bottom:7px;
    margin-left:-5px;
    border:thin solid;
}
img {
    border:medium none;
}

#tv {
    background:url("") no-repeat scroll 0 0 transparent;
    float:left;
    height:310px;
    overflow:hidden;
    padding:0 61px 0 10px;
    position:relative;
    width:400px;
}

#corpoh {
    text-align:left;
}
</style>

<div id="tv">
<script type="text/javascript">
// JavaScript para tv //
var index = 1; var menu_time = 6000; var anterior = 10; var timer = setTimeout('trocaMsg()',menu_time);
function trocaMsg() { index = index%10 +1; channel(index); tempo(); } 
function tempo() { clearTimeout(timer); timer = setTimeout("trocaMsg()",menu_time);}
function channel(id) { index = id; document.getElementById("tvn" + anterior).className= "transp"; document.getElementById("tvn" + id).className = "opac"; document.getElementById('tvshow').innerHTML=document.getElementById('tv' + id).innerHTML; anterior = id;}
function tvch(id, out) {if (out == 1) { clearTimeout(timer); channel(id);} else { tempo();}}
//channel(1);

// JavaScript para tv-papeis //
var index_p = 1; var menu_time_p = 2800; var anterior_p = 10; var timer_p = setTimeout('trocaMsg_p()',menu_time_p);
function trocaMsg_p() { index_p = index_p%10 +1; channel_p(index_p); tempo_p(); } 
function tempo_p() { clearTimeout(timer_p); timer_p = setTimeout("trocaMsg_p()",menu_time_p);}
function channel_p(idx) { index_p = idx; document.getElementById("tvp" + anterior_p).className= "transp"; document.getElementById("tvp" + idx).className = "opac"; document.getElementById('paptv').innerHTML=document.getElementById('ptv' + idx).innerHTML; anterior_p = idx;}
function tvch_p(idx, out) {if (out == 1) { clearTimeout(timer_p); channel_p(idx);} else { tempo_p();}}
//channel_p(1);

//Função p/ n Aparecer erro de JS no navegador do Tiozinho
function semerro(){
    return true;}
window.onerror=semerro;
</script>

<div id="tvshow">
    <a href="http://s13.zetaboards.com/Blood_Palace_RPG/topic/7432060/1/" src="http://s13.zetaboards.com/Blood_Palace_RPG/topic/7432060/1/" title="Sistema de Procurados" style="width: 354px;"> Votem!! <span>Para que seja implantado novo sistema! </span></a>                           
</div>

<div id="nav">
<a href=" "><img onmouseout="tvch(1,0)" onmouseover="tvch(1,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg" class="transp" id="tvn1" style="width: 20px; height: 20px;" /></a>
<a href=" "><img onmouseout="tvch(2,0)" onmouseover="tvch(2,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg" class="transp" id="tvn2" style="width: 20px; height: 20px;" /></a>
<a href=" "><img onmouseout="tvch(3,0)" onmouseover="tvch(3,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg" class="transp" id="tvn3" style="width: 20px; height: 20px;" /></a>
<a href=" "><img onmouseout="tvch(4,0)" onmouseover="tvch(4,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg" class="transp" id="tvn4" style="width: 20px; height: 20px;" /></a>
<a href="http://narutotaisen.forumeiros.com/forum"><img onmouseout="tvch(5,0)" onmouseover="tvch(5,1)" http:="" www.asupr.com="" asureport="" wp-content="" uploads="" 2008="" 10="" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg" class="transp" id="tvn5" style="width: 20px; height: 20px;" /></a>
<a href=" "><img onmouseout="tvch(6,0)" onmouseover="tvch(6,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg" class="transp" id="tvn6" style="width: 20px; height: 20px;" /></a>
<a href=" "><img onmouseout="tvch(7,0)" onmouseover="tvch(7,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg" class="transp" id="tvn7" style="width: 20px; height: 20px;" /></a>
<a href=" "><img onmouseout="tvch(8,0)" onmouseover="tvch(8,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg" class="transp" id="tvn8" style="width: 20px; height: 20px;" /></a>
<a href=" "><img onmouseout="tvch(9,0)" onmouseover="tvch(9,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg" class="transp" id="tvn9" style="width: 20px; height: 20px;" /></a>
<a href=" "><img onmouseout="tvch(10,0)" onmouseover="tvch(10,1)" src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/botatildeo-tv_zps8sbgcxa3.jpg" class="transp" id="tvn10" style="width: 20px; height: 20px;" /></a>
</div>

<ul id="hid">
    <li id="tv1">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-deidara_zpspk89i4qu.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-deidara_zpspk89i4qu.png" title="Deidara" style="width: 291px; height: 280px;" /> 1 <span> Akatsuki </span></a>                            
    </li>

    <li id="tv2">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-hidan_zpsviw7vs30.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-hidan_zpsviw7vs30.png" title="Hidan" style="width: 291px; height: 280px;" /> 2 <span> Akatsuki </span></a>                            
     </li>

    <li id="tv3">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/Procurado-Itachi_zpspv7jm287.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/Procurado-Itachi_zpspv7jm287.png" title="Itachi" style="width: 291px; height: 280px;" /> 3 <span> Akatsuki </span></a>                            
    </li>

    <li id="tv4">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-kakuzu_zpszxuyjuva.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-kakuzu_zpszxuyjuva.png" title="Kakuzu" style="width: 291px; height: 280px;" /> 4 <span> Akatsuki </span></a>                            
    </li>

    <li id="tv5">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-Kisame_zpsckcnxkes.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-Kisame_zpsckcnxkes.png" title="Kisame" style="width: 291px; height: 280px;" /> 5 <span> Akatsuki </span></a>                            
    </li>

    <li id="tv6">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-konan_zps3y8v0xsx.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-konan_zps3y8v0xsx.png" title="Konan" style="width: 291px; height: 280px;" /> 6 <span> Akatsuki </span></a>                            
    </li>

    <li id="tv7">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-sasori_zpssfow5vb2.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-sasori_zpssfow5vb2.png" title="Sasori" style="width: 291px; height: 280px;" /> 7 <span>    Akatsuki </span></a>                            
    </li>

    <li id="tv8">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurados-nagato_zpsl4cnbmsz.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurados-nagato_zpsl4cnbmsz.png" title="Nagato" style="width: 291px; height: 280px;" /> 8 <span> Akatsuki </span></a>                            
    </li>

    <li id="tv9">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-tobi_zps3ztshwbx.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-tobi_zps3ztshwbx.png" title="Tobi" style="width: 291px; height: 280px;" /> 9 <span> Akatsuki </span></a>                             
    </li>

    <li id="tv10">
        <a href="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-zetsu_zpsw3r7msbv.png"><img src="http://i1278.photobucket.com/albums/y511/KaitoShirogane/procurado-zetsu_zpsw3r7msbv.png" title="Zetsu" style="width: 291px; height: 280px;" /> 10 <span>    Akatsuki </span></a>                             
    </li>
</ul>
<script type="text/javascript"> channel(1); </script> 
</div>

Answer 1

To add divs online, just add the property - float:left; to classes Parent (or in this case, every column) you want to be in line. For example:

.colunaGrande {
    float:left; /* Propriedade adicionada à coluna grande */
    width: 70%;
    max-width: 450px;
    height: 95vh;
    background-color: burlywood;
}

.colunaPequena {
    float:left; /* Propriedade adicionada à coluna pequena */
    width: 15%;
    max-width: 80px;
    border: 1px solid #000;
}

ul.caixas {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li.box {
    width: 65%;
    height: 30px;
    background-color: #000;
    margin: 10px auto;
}
.clear{clear:both;}

<div class="colunaGrande"></div>
<div class="colunaPequena">
    <ul class="caixas">
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
    </ul>
</div>
<div class="colunaPequena">
    <ul class="caixas">
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
    </ul>
</div>
<div class="clear"></div>

You got a EXAMPLE IN JSFIDDLE if you prefer.

---

# Update
Remember to add one at the end clear:both;, to make sure that from here nothing else will be floated as in update that I did to my reply, that in this case I created a specific class for this called class="clear".

Answer 2

This kind of question falls almost as opinionated.
I would do with flexbox. Depending on which browsers you want to give support, you can choose to use this property as well.

.wrapper {
  position: relative;
  height: 400px;
  width: 400px
}

.image {
  background: url(http://i.stack.imgur.com/rC9JM.jpg) no-repeat;
  left: 0;
  width: 85%
}

.blocks {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  right: 0;
  width: 15%
}

.image,
.blocks {
  position: absolute;
  top: 0;
  bottom: 0
}

.blocks div {
  height: 30px;
  width: 30px;
  background-color: #000;
  margin: 1px 0;
  color: #fff;
}

<div class='wrapper'>
  <div class='image'></div>
  <div class='blocks'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</div>

The "gain" comes when you need to include more blocks. Follow an example using the same structure and rules as the snippet above, but including more blocks:

.wrapper {
    position: relative;
    height: 400px;
    width: 400px
}

.image {
    background: url(http://i.stack.imgur.com/rC9JM.jpg) no-repeat;
    left: 0; width: 85%
}

.blocks {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    right: 0;
    width: 15%
}

.image, .blocks {
    position: absolute;
    top: 0;
    bottom: 0
}

.blocks div {
    height: 30px;
    width: 30px;
    background-color: #000;
    margin: 1px 0;
    color: #fff;
}

<div class='wrapper'>
  <div class='image'></div>
  <div class='blocks'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
</div>

Note that the only difference is the number of div inside the element with class .blocks.

That article is a great reference on the use of flexbox.