<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
vertical-align: baseline;
}
body {
width: 100%;
background-color: black;
}
.loren{
display: block;
left: 0;
width: 50%;
}
.ipsulum{
display: block;
left: 0;
width: 50%;
}
p {
margin: 5px;
font-family: Arial;
font-size: 15pt;
font-weight: bold;
background-color: gray;
color: white;
}
</style>
</head>
<body>
<div class="loren">
<p>Loren</p>
</div>
<div class="ipsulum">
<p>Ipsulum</p>
</div>
</body>
</html>
1 Resposta
Uma forma de os colocar lado a lado é com float:left
. Aproveito para dizer a propriedade left
não tem efeito para elementos posicionados de forma estática como é o seu caso, e que display:block
é o display
por defeito para um <div>
Exemplo com float:left
:
* {
margin: 0;
padding: 0;
vertical-align: baseline;
}
body {
width: 100%;
background-color: black;
}
.loren{
float:left; /*<---*/
width: 50%;
}
.ipsulum{
float:left; /*<---*/
width: 50%;
}
p {
margin: 5px;
font-family: Arial;
font-size: 15pt;
font-weight: bold;
background-color: gray;
color: white;
}
<div class="loren">
<p>Loren</p>
</div>
<div class="ipsulum">
<p>Ipsulum</p>
</div>
Outra forma de fazer o mesmo é com display:flex
que implica criar um elemento que englobe os dois divs:
* {
margin: 0;
padding: 0;
vertical-align: baseline;
}
body {
width: 100%;
background-color: black;
}
.loren{
width: 50%;
}
.ipsulum{
width: 50%;
}
p {
margin: 5px;
font-family: Arial;
font-size: 15pt;
font-weight: bold;
background-color: gray;
color: white;
}
.conteudo {
display:flex; /*<--*/
}
<div class="conteudo"> <!--div para conter os dois já existentes-->
<div class="loren">
<p>Loren</p>
</div>
<div class="ipsulum">
<p>Ipsulum</p>
</div>
</div>
Documentação:
float:left