Put div next to div

Navigation
1

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

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

What's happening:

link

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 this?

    
asked by anonymous 29.05.2017 / 16:16

1 answer

1

Use bootstrap resources for this, in your case, use the 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 your browser's resolution.

Below is 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 have split the html into two lines ( div with class row );

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

Resolution Settings

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

  • lg - Large Devices (desktops,> 1200px)
  • md - Average Devices (desktops,> 992px & & 1200px)
  • sm - Small devices (tablets, > = 768px & & 992px)
  • xs - Extra small devices (smartphones,
29.05.2017 / 16:50
jQuery DataTable Print Details Using keys to display javascript