vincent thorpe vincent thorpe - 1 month ago 9
HTML Question

CSS: prevent div Y-axis from moving, when I add text inside <p> wich is inside that div

Look at the div#1, why it goes down when I add some text inside div#2>p
I've been trying to figure out, but nothing. I'm new in css. I cannot understand how it works this css3, I'm not a designer Im a programmer, it gives a lot of headaches.

p.n: there's no div#1/2 inside the code, both are from the same class: container, Danke



.img {
width: 170px;
height:150px;
background: orange;
}
.contenedor:not(:first-child) {
margin: 0 50px;
}
.contenedor {
display: inline-block;
box-shadow: 0 4px 8px 0px rgba(0,0,0,0.4);
transition: .1s;
cursor: pointer;
resize: none;
max-width: 170px;
}
.contenedor:hover {
box-shadow: 0 8px 16px 0px rgba(0,0,0,0.4);
}
.leyenda {padding:0 10px 20px 10px;}

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>

</style>
<body>
<div class="contenedor">
<div class="img">DIV #1</div>
<div class="leyenda">
<h4><b>John Doe</b></h4>
<p><b>This should be up.</b></p>
</div>
</div>

<div class="contenedor">
<div class="img">DIV #2</div>
<div class="leyenda">
<h4><b>Jane Doe</b></h4>
<p>Post you charge here.Post you
charge here.Post you charge here.</p>
</div>
</div>

</body>
</html>




Answer

Add vertical-align: top; to .contenedor (it has display: inline-block;, so it's aligned along the baseline by default):

.img {
  width: 170px;
  height:150px;
  background: orange;
}
.contenedor:not(:first-child) {
  margin: 0 50px;
}
.contenedor {
  display: inline-block;
  box-shadow: 0 4px 8px 0px rgba(0,0,0,0.4);
  transition: .1s;
  cursor: pointer;
  resize: none;
  max-width: 170px;
  vertical-align: top;
}
.contenedor:hover {
  box-shadow: 0 8px 16px 0px rgba(0,0,0,0.4);
}
.leyenda {padding:0 10px 20px 10px;}
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>

</style>
<body>
	<div class="contenedor">
		<div class="img">DIV #1</div>
		<div class="leyenda">
			<h4><b>John Doe</b></h4>
			<p><b>This should be up.</b></p>
		</div>
	</div>
	
	<div class="contenedor">
		<div class="img">DIV #2</div>
		<div class="leyenda">
			<h4><b>Jane Doe</b></h4>
			<p>Post you charge here.Post you 
              charge here.Post you charge here.</p>
		</div>
	</div>
	
</body>
</html>

Comments