CODEWITHSUNDEEP
htmlcss
Pri Jain
Pri Jain

Reputation: 29

Content in div overlapping

I have a h3 tag and p tag in a div and they keep overlapping even though I've added margin.

.title {
  margin: 0 0 26px;
  width: 335px;
  height: 28px;
  font-size: 24px;
  font-stretch: normal;
  font-style: normal;
  line-height: 36px;
  letter-spacing: 0;
  text-align: center;
}

.para {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: normal;
  text-align: center;
  color: #3f4658;
  margin: 26px 0 0;
}
<div class="new">
  <h3 class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae in controversiam veniunt, de iis, si placet, disseramus. Aliud </h3>

  <p class="para">
    Et si turpitudinem fugimus in statu et motu corporis, quid est cur pulchritudinem non sequamur? Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant. Duo Reges: constructio interrete. Quid me istud rogas? Varietates autem iniurasque fortunae
    facile veteres philosophorum praeceptis instituta vita superabat. Est enim effectrix multarum et magnarum voluptatum. Quod si ita se habeat, non possit beatam praestare vitam sapientia. Satis est ad hoc responsum.
  </p>

</div>

I need a flexible title meaning if I add more in the title it should be reponsive and not overlap the paragragh below it

Upvotes: 0

Views: 47

Answers (3)

Vishal_VE
Vishal_VE

Reputation: 2137

.title {
  margin: 0 0 26px;
  width: 335px;
  height: auto;
  font-size: 24px;
  font-stretch: normal;
  font-style: normal;
  line-height: 36px;
  letter-spacing: 0;
  text-align: center;
}

.para {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: normal;
  text-align: center;
  color: #3f4658;
  margin: 26px 0 0;
}
<div class="new">
  <h3 class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae in controversiam veniunt, de iis, si placet, disseramus. Aliud </h3>

  <p class="para">
    Et si turpitudinem fugimus in statu et motu corporis, quid est cur pulchritudinem non sequamur? Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant. Duo Reges: constructio interrete. Quid me istud rogas? Varietates autem iniurasque fortunae
    facile veteres philosophorum praeceptis instituta vita superabat. Est enim effectrix multarum et magnarum voluptatum. Quod si ita se habeat, non possit beatam praestare vitam sapientia. Satis est ad hoc responsum.
  </p>

</div>

Upvotes: 0

DecPK
DecPK

Reputation: 25401

Just remove the height

height: 28px;


.title {
  margin: 0 0 26px;
  width: 335px;
  /* height: 28px;   // Height Remove to achieve the normal flow */
  font-size: 24px;
  font-stretch: normal;
  font-style: normal;
  line-height: 36px;
  letter-spacing: 0;
  text-align: center;
}

.para {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: normal;
  text-align: center;
  color: #3f4658;
  margin: 26px 0 0;
}
<div class="new">
  <h3 class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae in controversiam veniunt, de iis, si placet, disseramus. Aliud </h3>

  <p class="para">
    Et si turpitudinem fugimus in statu et motu corporis, quid est cur pulchritudinem non sequamur? Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant. Duo Reges: constructio interrete. Quid me istud rogas? Varietates autem iniurasque fortunae
    facile veteres philosophorum praeceptis instituta vita superabat. Est enim effectrix multarum et magnarum voluptatum. Quod si ita se habeat, non possit beatam praestare vitam sapientia. Satis est ad hoc responsum.
  </p>

</div>

Upvotes: 2

tacoshy
tacoshy

Reputation: 13007

As you see in the snippet below, you having an overflow that occures. the red border is 28px high while the overflowing content is cut off:

/* for demonstration of the issue */
.title {
  overflow: hidden;
  border: 1px solid red;
}


.title {
  margin: 0 0 26px;
  width: 335px;
  height: 28px;
  font-size: 24px;
  font-stretch: normal;
  font-style: normal;
  line-height: 36px;
  letter-spacing: 0;
  text-align: center;
}

.para {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: normal;
  text-align: center;
  color: #3f4658;
  margin: 26px 0 0;
}
<div class="new">
  <h3 class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae in controversiam veniunt, de iis, si placet, disseramus. Aliud </h3>

  <p class="para">
    Et si turpitudinem fugimus in statu et motu corporis, quid est cur pulchritudinem non sequamur? Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant. Duo Reges: constructio interrete. Quid me istud rogas? Varietates autem iniurasque fortunae
    facile veteres philosophorum praeceptis instituta vita superabat. Est enim effectrix multarum et magnarum voluptatum. Quod si ita se habeat, non possit beatam praestare vitam sapientia. Satis est ad hoc responsum.
  </p>

</div>

In your sampel the content oevrflows and as such collided with the element that follows. Either add an overflow rule to the title or remove the fixed height.

Upvotes: 0

Related Questions