Line height pushes <p> text away but not <h2> text

Question

I want the H2 and P text to be vertically aligned in the purple "pic_and_product_area_b" div, but the P text is outside the div for some reason (after I added a line height of 300px this happened, but before the H2 and P text was inside the div at the top). How can I get the H2 and P text inside the div and vertically aligning in the middle?

HTML:

<div class="pic_and_product_b">
<div class="pic_and_product_area_b">
<h2>H2 TEXT</h2>
<p>P TEXT</p>
</div>
<div class="pic-b"></div>
</div>

CSS:

.pic_and_product_a{
width:960px;
height:300px;
float:left;
background:#3F3;
}
.pic_and_product_b{
width:960px;
height:300px;
float:left;
background:#33F;
}
.pic-a{
width:300px;
height:300px;
float:left;
background:#660;
}
.pic-b{
width:300px;
height:300px;
float:left;
background:#906;
}
.pic_and_product_area_a{
width:630px;
height:300px;
float:left;
background:#960;
margin-left:30px;
}
.pic_and_product_area_b{
width:630px;
height:300px;
float:left;
background:#96C;
margin-right:30px;
text-align:right;
line-height:300px;
}
h2{
font-family:arial,verdana,helvetica,sans-serif;
font-size:18px;
color:#201c1f;
text-decoration:none;
text-transform:uppercase;
font-weight:100;
margin:0;
padding: 0 0 10px 0;
}
h2 a:link{
color:#201c1f;
text-decoration:none;
}
h2 a:visited{
color:#201c1f;
text-decoration:none;
}
h2 a:hover{
color:#201c1f;
text-decoration:underline;
}
h2.onpages{
font-weight:100;text-transform:none;font-size:11px;
}
p{
font-family:arial,verdana,helvetica,sans-serif;
font-size:14px;
color:#333333;
text-decoration:none;
margin:0 0 0px 0;
padding:0 0 0 0px;
line-height:20px;
}
p a:link{
color:#333333;
text-decoration:underline;
}
p a:visited{
color:#333333;
text-decoration:underline;
}
p a:hover{
color:#333333;
text-decoration:underline;
font-weight:bold;
}

Answer 1

You have used the float property. float will make your elements stand out in the DOM. Other elements no longer have a relation to the floating element So, the problem is using float. Problem could be solved keeping them relative.

Answer 2

.pic_and_product_a{
width:960px;
height:300px;
float:left;
background:#3F3;
}
.pic_and_product_b{
width:960px;
height:300px;
float:left;
background:#33F;
}
.pic-a{
width:300px;
height:300px;
float:left;
background:#660;
}
.pic-b{
width:300px;
height:300px;
float:left;
background:#906;
}
.pic_and_product_area_a{
width:630px;
height:300px;
float:left;
background:#960;
margin-left:30px;
}
.pic_and_product_area_b{
width:630px;
height:300px;
float:left;
background:#96C;
margin-right:30px;
text-align:right;
}
h2{
font-family:arial,verdana,helvetica,sans-serif;
font-size:18px;
color:#201c1f;
text-decoration:none;
text-transform:uppercase;
font-weight:100;
margin-top: 100px;
padding: 0 0 10px 0;
}
h2 a:link{
color:#201c1f;
text-decoration:none;
}
h2 a:visited{
color:#201c1f;
text-decoration:none;
}
h2 a:hover{
color:#201c1f;
text-decoration:underline;
}
h2.onpages{
font-weight:100;text-transform:none;font-size:11px;
}
p{
font-family:arial,verdana,helvetica,sans-serif;
font-size:14px;
color:#333333;
text-decoration:none;
margin:0 0 0px 0;
padding:0 0 0 0px;
line-height:20px;
}
p a:link{
color:#333333;
text-decoration:underline;
}
p a:visited{
color:#333333;
text-decoration:underline;
}
p a:hover{
color:#333333;
text-decoration:underline;
font-weight:bold;
}

<div class="pic_and_product_b">
<div class="pic_and_product_area_b">
<h2>H2 TEXT</h2>
<p>P TEXT</p>
</div>
<div class="pic-b"></div>
</div>

Like this? I took the line height off of the h2 and p and added a margin-top to the h2.

Answer 3

you need to giv margin-top to p elemenet replace this css.

p{
  font-family: arial,verdana,helvetica,sans-serif;
  font-size: 14px;
  color: #333333;
  text-decoration: none;
  margin: -144px 0 0px 0;
  padding: 0 0 0 0px;
  line-height: 20px;
}

Answer 4

Your Answer is here

Your style code contains some properties that doesn't allow to see your right changes. So, i suggest you to clean every property you don't know what it does, and start your style code from this pal's answer.