Div side by side is slightly lower

Asked

Viewed 55 times

2

Good afternoon, I have been developing a page, very similar to another famous one, but for some reason in the Ivs that I have side by side one of them gets lower do not know why, someone knows how to fix it?

		@import url('https://fonts.googleapis.com/css?family=Lato:300,400&display=swap');
		*{
			margin: 0;
			padding: 0;
		}
		body{
			font-family: 'Lato', sans-serif;
		}
		h1{
			font-weight: 300;
			color: #404040;
			font-size: 64px;
		}
		div#content{
			margin: 30px auto;
			width: 50%;
		}
		.help{
			font-size: 15px;
			font-family: monaco,courier,monospace;
			color: #404040;
		}
		.error{
			color: #999;
			font-size: 25px;
			font-weight: 400;
		}
		div#what{
			width: 50%;
			display: inline-block;
		}
		div#whnow{
			margin-left: 3%;
			width: 46%;
			display: inline-block;
		}
		div#boxs{
			margin-top: 10%;
		}
		div#boxs p{
			margin-top: 10px;
			line-height: 23px;
		}
		.emp{
			color: #2f7bbf;
			text-decoration: none;
		}
		.emp:hover{
			color: rgb(246,139,31);
			text-decoration: underline;
			cursor: pointer;
		}
		div#rodape{
			text-align: center;
			margin-top: 50px;
			border-top: 1px solid #ebebeb;
		}
		div#rodape p{
			margin-top: 40px;
			font-family: monaco,courier,monospace;
			font-size: 12px;
		}
<html>
	<head>
	<title>Direct IP Access Not Allowed | IMM Guard</title>
	</head>
	<body>
	<div id="content">
	<h1>Erro 1000 <label class="help">Request ID: dfgjk-sadfaf-asdfsdfa-asdf • Time: {time}</label></h1>
	<p class="error">Acesso Direto por IP não permitido!</p>
	<div id="boxs">
	<div id="what">
	<h2>O que está a acontecer?</h2>
	<p>Você está a tentar entrar num site protegido pela <a href="#" class="emp">IMM | GUARD</a> pelo IP dos nossos servidores, mas o nosso cliente pediu o bloqueio direto!</p>
	</div>
	<div id="whnow">
	<h2>O que posso fazer?</h2>
	<p>Para aceder a pagina que pretende, entre pelo endereço da pagina!</p>
	</div>
	</div>
	<div id="rodape">
	<p>IMM Request ID: 54adf0a09ada622e • Your IP: 2.81.244.98 • Proteja e acelere os seus sites com a <a href="#" class="emp">IMM | GUARD</a></p>
	</div>
	</div>
	</body>
	</html>

html css

1 answer

3


Guy like you put display:inline-block you can use properties inline in div, and the property that will fix that is the vertical-align: top; so the content will align on top of box-model

inserir a descrição da imagem aqui

Follow the image code above:

(Display in Full Page to see how it looks since the responsive part seems that you haven’t done yet)

*{
  margin: 0;
  padding: 0;
}
body{
  font-family: 'Lato', sans-serif;
}
h1{
  font-weight: 300;
  color: #404040;
  font-size: 64px;
}
div#content{
  margin: 30px auto;
  width: 50%;
}
.help{
  font-size: 15px;
  font-family: monaco,courier,monospace;
  color: #404040;
}
.error{
  color: #999;
  font-size: 25px;
  font-weight: 400;
}
div#what{
  width: 50%;
  display: inline-block;
}
div#whnow{
  margin-left: 3%;
  width: 46%;
  display: inline-block;
  vertical-align: top;
}
div#boxs{
  margin-top: 10%;
}
div#boxs p{
  margin-top: 10px;
  line-height: 23px;
}
.emp{
  color: #2f7bbf;
  text-decoration: none;
}
.emp:hover{
  color: rgb(246,139,31);
  text-decoration: underline;
  cursor: pointer;
}
div#rodape{
  text-align: center;
  margin-top: 50px;
  border-top: 1px solid #ebebeb;
}
div#rodape p{
  margin-top: 40px;
  font-family: monaco,courier,monospace;
  font-size: 12px;
}
<div id="content">
  <h1>Erro 1000 <label class="help">Request ID: dfgjk-sadfaf-asdfsdfa-asdf • Time: {time}</label></h1>
  <p class="error">Acesso Direto por IP não permitido!</p>
  <div id="boxs">
    <div id="what">
      <h2>O que está a acontecer?</h2>
      <p>Você está a tentar entrar num site protegido pela <a href="#" class="emp">IMM | GUARD</a> pelo IP dos nossos servidores, mas o nosso cliente pediu o bloqueio direto!</p>
    </div>
    <div id="whnow">
      <h2>O que posso fazer?</h2>
      <p>Para aceder a pagina que pretende, entre pelo endereço da pagina!</p>
    </div>
  </div>
  <div id="rodape">
    <p>IMM Request ID: 54adf0a09ada622e • Your IP: 2.81.244.98 • Proteja e acelere os seus sites com a <a href="#" class="emp">IMM | GUARD</a></p>
  </div>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.