Alexander  Tolkachev Alexander Tolkachev - 3 months ago 5
CSS Question

Why does my div not show inline?

I want my

TOP 10
text to be placed the same level as
Kreuger National Park
but instead i get thisenter image description here



.info{
background: url(pictures/info-shape.png) no-repeat;
width: 100%;
height: 950px;
}

.info-left{
width: 50%;
padding: 282px 0 0 38px;
display: inline-block;
}

.info-block{
margin-bottom: 30px;
}

h2 {
font: 48pt "Lindsey", Arial, Helvetica, sans-serif;
color: #bd950c;
display: inline;
margin-right: 15px;
}

h3 {
font: 28pt "Perpetua Titling MT", Arial, Helvetica, sans-serif;
color: black;
margin-left: 15px;
display: inline;
}

p {
text-align: justify;
-moz-text-align-last: left;
text-align-last: left;
}

.info-right{
width: 30%;
padding: 282px 0 0 100px;
display: inline-block;
}

<div class="info">
<div class="info-left">
<h2 class="info-block">Kreuger</h2>
<h3>National Park</h3>
<p class="info-block">Africa is comprised of desert, tropical, savanna grasslands, jungle and even subarctic climates. The top half of the continent is comprised of desert, and the Sahara Desert, the world’s hottest desert, is located in Northern Africa, and at 3.5 million square miles is approximately the size of the United. States or China. The Nile River, which runs through 11 different countries in Africa, is the longest in the world.</p>
<p class="info-block">Africa is comprised of desert, tropical, savanna grasslands, jungle and even subarctic climates. The top half of the continent is comprised of desert, and the Sahara Desert, the world’s hottest desert, is located in Northern Africa, and at 3.5 million square miles is approximately the size of the United.</p>
</div>
<div class="info-right">
<h2 class="info-block">
TOP 10
</h2>
</div>
</div>




Answer

The default vertical alignment for inline elements is baseline, so set it to what you're after, top:

.info-right {
    vertical-align:top;
}

.info{
	background: url(pictures/info-shape.png) no-repeat;
	width: 100%;
	height: 950px;
}

.info-left{
	width: 50%;
	padding: 282px 0 0 38px;
	display: inline-block;
}

.info-block{
	margin-bottom: 30px;
}

h2 {
	font: 48pt "Lindsey", Arial, Helvetica, sans-serif;
	color: #bd950c;
	display: inline;
	margin-right: 15px;
}

h3 {
	font: 28pt "Perpetua Titling MT", Arial, Helvetica, sans-serif;
	color: black;
	margin-left: 15px;
	display: inline;
}

p {
	text-align: justify;
	-moz-text-align-last: left;
	text-align-last: left;
}

.info-right{
	width: 30%;
	padding: 282px 0 0 100px;
	display: inline-block;
  vertical-align:top;
}
<div class="info">
  <div class="info-left">
    <h2 class="info-block">Kreuger</h2>
    <h3>National Park</h3>
    <p class="info-block">Africa is comprised of desert, tropical, savanna grasslands, jungle and even subarctic climates. The top half of the continent is comprised of desert, and the Sahara Desert, the world’s hottest desert, is located in Northern Africa, and at 3.5 million square miles is approximately the size of the United. States or China. The Nile River, which runs through 11 different countries in Africa, is the longest in the world.</p>
    <p class="info-block">Africa is comprised of desert, tropical, savanna grasslands, jungle and even subarctic climates. The top half of the continent is comprised of desert, and the Sahara Desert, the world’s hottest desert, is located in Northern Africa, and at 3.5 million square miles is approximately the size of the United.</p>
  </div>
  <div class="info-right">
    <h2 class="info-block">
      TOP 10
    </h2>
  </div>	
</div>

Comments