Place div next to div

Question

Well, I have div items and div items2, which are both inserted within 1 div.

What I intended to do was to align the div items and the div items2, since the div items2 is always below the other.

What is going on:

http://afdtorre.pt/goncalo/

Code:

<style>
body{
background-image: url("imagens/fundo.png");
background-repeat: no-repeat;
background-size: cover;
margin:0;
}   

.container{
margin-left:10%;
margin-right:10%;
width:80%;  
position:relative;
height:100%;
}

.logo{  
position:absolute;
margin-top:1.5%;
}
.bloco1{
position:absolute;
background-color:#B200B2;
height:0.5%;
width:100%;
margin-top:16%; 
}

.linha1{
margin-left:20%;
background-color:#ABABAB;   
height:5%;
width:20%;
margin-top:2%;
position:absolute;
}


.online{
margin-left:60%;
margin-top:0%;
position:absolute;
}

.jack{
background-color:#ABABAB;   
height:5%;
max-width:20%;
margin-left:80%;
position:absolute;  
}


.loginsteam{
position:absolute;  
margin-top:7%;
margin-left:80%;

}

.bloco2{
position:absolute;
background-color:#B200B2;
height:0.3%;
width:70%;
margin-top:31%; 
margin-left:30%;
}

.menu{
margin-top:10%; 
margin-left:20%;
position:absolute;
font:20px proxima_nova_condensedlight;
color:#BEBEBE;
width:50%;
}

.status{
position:absolute;
width:55%;
height:6%;
border-style: solid;
border-width: 0.1px;
margin-top:16.8%;
margin-left:44.8%;
font-family:proxima_nova_cn_rgregular,sans-serif;
}
.items{
position:absolute;
width:100%;
margin-top:20%;
height:15%;
display:flex;
}
.item{
border-style: solid;
border-width: 0.1px;
width:10%;
}

.addskins{
position:absolute;
margin-top:30%;
height:9%;
width:28%;
background-color:#E8E800;
border:2px solid #646473;
}
.estadocinza{
position:absolute;
margin-top:38%;
font:20px proxima_nova_condensedlight;
color:#BEBEBE;

}

</style>
<header>
<div class="container">
<div class="jack">
Best Jackpot: Goncalo
</div>


<div class="online">
<span style="color:#a9a9a9; font-family:proxima_nova_cn_rgregular,sans-serif; font-size:18px; text-transform: uppercase;">Online:</span>
<span style="color:#a9a9a9; font-family:proxima_nova_cn_rgregular,sans-serif; font-size:17px; text-transform: uppercase;"><b>20</b></span>  
</div>

<div class="menu">
<span>SUPPORT</span> <span style="margin-left:2%;"><b>FAQ</b></span> <span style="margin-left:2%;"><b>TOP 10</b></span> <span style="margin-left:2%;"><b>GIVEWAY</b></span>
</div>

<div class="bloco1">
</div>

<div class="status">
<span style="color:#A9A9A9; margin-left:1%;">Winner:</span> <span style="color:#FEA601;"><b>Goncalo</b>
<span style="color:#A9A9A9; margin-left:1%; margin-top:-2%;">Win Chance:</span> <span style="color:#FEA601;"><b>10%</b>
<span style="color:#A9A9A9; margin-left:1%; margin-top:-2%;">Deposited:</span> <span style="color:#FEA601;"><b>20.15</b>
<span style="color:#A9A9A9; margin-left:1%; margin-top:-2%;">Round Hash:</span> <span style="color:#FEA601;"><b>EA32432..</b>
</div>

<div class="items">
<div class="item">
</div>
<div class="item" style="margin-left:0.058%;">
</div>
<div class="item" style="margin-left:0.058%;">
</div>
<div class="item" style="margin-left:0.058%;">
</div>
<div class="item" style="margin-left:0.058%;">
</div>
<div class="item" style="margin-left:0.058%;">
</div>
</div>

<div class="loginsteam">
<img src="imagens/login.png">
</div>


<div class="logo">
<img src="imagens/logo.png">
</div>

<div class="bloco2">
</div>

<div class="addskins">
Add Skins
</div>

<span class="estadocinza">You Deposited:</span>
<br>
<br>
<span class="estadocinza">You Deposited:</span>
<br>
<br>    
<span class="estadocinza">You Deposited:</span>
</div>
</header>

How can I do?

Answer 1

Use the resources of bootstrap for this, in your case, use the concepts of grid system

What is the Grid System?

Grid System is used to create page layouts using a series of rows and columns, your page will be divided into 12 columns, which will vary in size according to the resolution of the browser.

See below for a practical example of the idea:

.col {
  border: 1px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col col-xs-4">
      Coluna ocupando 4 de 12 colunas
    </div>
    <div class="col col-xs-4">
      Coluna ocupando 4 de 12 colunas
    </div>
    <div class="col col-xs-4">
      Coluna ocupando 4 de 12 colunas
    </div>
  </div>
  <div class="row">
    <div class="col col-xs-6">
      Coluna ocupando 6 de 12 colunas
    </div>
    <div class="col col-xs-2">
      Coluna ocupando 2 de 12 colunas
    </div>
    <div class="col col-xs-2">
      Coluna ocupando 2 de 12 colunas
    </div>
    <div class="col col-xs-2">
      Coluna ocupando 2 de 12 colunas
    </div>
    <div class="col col-xs-5">
      Coluna ocupando 5 de 12 colunas
    </div>
  </div>
</div>

Note that I split html into two lines (div with the class row);

• In the first row I defined 3 columns and each column occupies the space of 4 columns (div with class col-xs-4) in the grid system (remember that the layout is divided into 12 columns)
• Note that in the second row , I set more than 12 columns, were 17 in total, the last, which did not serve automatically was played down, however, still on the same line.

Resolution setting

Now, remember I mentioned that Grid System is used to make your page responsive? So, you can define a different amount of columns in each resolution, see the definition:

• lg - Large devices (desktops, >= 1200px)
• md - Medium devices (desktops, >= 992px && < 1200px)
• sm - Small devices (tablets, >= 768px && < 992px)
• xs - Extra small devices (smartphones, < 768px)

How to use columns by resolution?

Use the resolution markers mentioned above with the amount of columns you want for each resolution, see an example below, I will define

• 6 speakers for mobile
• 5 columns for small devices
• 4 columns for medium devices
• 3 columns for large devices

The class declaration in the div would be as follows:

• <div class="col-xs-6 col-sm-5 col-md-4 col-lg-3"></div>

It may seem a little complicated the Grid System at first glance, but over time you understand all its operation and will see how much faster it is to create layouts this way.

There are several resources on the Internet that explain about this resource, and the documentation is also very clear (but in English), however there is a lot of content in Portuguese too (just give a "googlada"), but see that to begin with.