Bom, eu tenho a div items e a div items2, que estão ambas inseridas dento de 1 div.
O que pretendia fazer era colocar alinhadas a div items e a div items2, visto que a div items2 fica sempre por baixo da outra.
O que está a acontecer:
Código:
<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>
Como poderei fazer?
float:left
não resolve seu problema?float: left
nas suas classes. Nota: Não comece nome de classes com números. Nota 2: Não faz sentido criar classes diferentes para todas as divs filhas.