Elements within the div are overlapping each other

Despite adding margin, my h3 tag and p tag in a div keep overlapping.

.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 am looking for a flexible title that adjusts responsively to avoid overlapping with the paragraph below.

htmlcss

Answer №1

Simply delete the specified height

height: 28px;


.title {
  margin: 0 0 26px;
  width: 335px;
  /* height: 28px;   // Removing the height to maintain 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>

Answer №2

Upon reviewing the snippet provided, it is evident that there is an overflow issue occurring. The red border appears to be 28px high while the overflowing content gets cut off:

/* To demonstrate the problem */
.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 example, the content overflows and collides with the following element. You can either add an overflow rule to the title or remove the fixed height to address this issue.

Answer №3

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Divs animated with jQuery keep on moving even after the animation has finished

My current project involves animating a single circle that scales, collides with two nearby circles, and then causes those circles to animate to specific positions. While everything works as expected, there is an issue where the two circles involved in the ...

javascriptjquerycssanimationjquery-animate

What causes certain CSS properties to scroll while others remain fixed?

I am experiencing a strange issue with my table. I am utilizing the tableHeadFixer jQuery plugin to create a fixed header with a scrollable table body. In my CSS, I have a class called table which is defined as follows: .table thead { color: blue; ...

jqueryhtmlcsstwitter-bootstrap

Is there a way to adjust the label elevation for a Material UI TextField component?

I am trying to enhance the appearance of a textfield label, but I am facing some challenges with my code. textStyle: { backgroundColor: '#1c1a1a', border: 0, borderRadius: 0, width: 400, height: 66, display: 'flex&a ...

javascriptcssreactjsmaterial-ui

using angularjs to dynamically apply css styles

Below is the input I have: The HTML code is shown below: <input type="number" ng-class="{negative: amount < 0}" ng-model="amount"/> This is the corresponding CSS code: .negative { color: red; } If the amount is positive, no specif ...

javascripthtmlcssangularjsng-class

Dropdown menu similar to the one utilized in Bootstrap

I am curious to understand how the drop-down menu system in Bootstrap3's tutorial page operates. It seems that it collapses all subtopics under a main topic by default, allowing users to either click or scroll to expand further. Additionally, the menu ...

csstwitter-bootstrapdrop-down-menu

Conceal descendant of list item and reveal upon clicking

In my responsive side menu, there is a submenu structured like this: .navbar ul li ul I would like the child menus to be hidden and only shown when the parent menu is clicked. Although I attempted to achieve this with the following code, it was unsucces ...

javascriptjqueryhtmlcss

Diverse positioning across various browsers

I have a navigation menu with alternating divs - one containing a menu link and the other a 'menu separator' div with a 2px wide 'separator bar' image. The width of the separator divs is set to 24px to create proper separations. For so ...

jquerycssbrowserdrop-down-menualignment

What is the best way to layer multiple navigation menus on top of each other using z-index?

I'm facing a challenge trying to position or overlap two navigation menus in my project. The technologies I am using are Bootstrap, HTML, and CSS. It seems like I might need to utilize the z-index property, but I'm unsure about the exact impleme ...

htmlcssz-index

The scrollOverflow feature in fullPage.js is not properly detecting the height of dynamically generated content

I have successfully implemented fullpage.js on my website. Everything is working perfectly with fullpage.js, but I am facing an issue when trying to open a div on click of pagination. Specifically, the browser scroll gets disabled when the div containing a ...

javascriptjqueryhtmlfullpage.js

Customer uploaded an image to the WordPress header but it is not aligning correctly

Trying to align an image added by my client in the WordPress header. As someone who is still learning CSS, I'm struggling to get it exactly where we want it. Visit the site here The Options House graphic currently sits on the right. My goal is to ha ...

htmlcsswordpress

I'm noticing my table collapsing as I move around the div elements - any idea why this is happening

A challenge I am facing is creating a dynamic table where users can drag and drop colored boxes with animated transitions. While it mostly works well, sometimes the table collapses inexplicably. Here are steps to reproduce the issue: Move 100 - 400 Move 1 ...

javascripthtmljquerycss

Resizing an image that is being pulled from a database

I am currently working on a challenging database project that seems to have hit a minor cosmetic roadblock. The database I'm dealing with loads profiles into arrays for display using a PHP while loop, making it easy to display content and allow for a ...

phpcssimageresize

Angular is throwing error TS2322 stating that the type 'string' cannot be assigned to the type '"canvas" while working with ng-particles

My goal is to incorporate particles.js into the home screen component of my project. I have successfully installed "npm install ng-particles" and "npm install tsparticles." However, even after serving and restarting the application, I am unable to resolve ...

htmlcssangulartypescriptparticle.js

Is there a way to remove the unwanted code ​ from the client side of my website?

Upon inspecting the source code of a webpage, I noticed an odd character ​ appearing before the <script> tag on the client side. Strangely, this mysterious character is not present anywhere in the server-side PHP file. I attempted removing a ...

phphtmltwitter-bootstrapsyntax

Required inputs do not disrupt the form's action flow

Here is the HTML code that I am working with: function document_save_changes(){ if (is_key_dirty == true){ var elm = document.getElementById('set_doc_button'); key_change_warning(elm, 'D'); return; } if (document_save_warning('A ...

javascripthtmlforms

assigning the browser's width to a variable within an scss file

Is there a way to dynamically set the browser's width as a variable? I am familiar with @media queries, but I need to calculate the browser's width for a specific purpose. I attempted using jQuery to achieve this, and it works well with a fixed ...

javascriptjquerycsssass

Off Canvas left navigation menu using Bootstrap

I am working on creating a responsive layout for a webpage using Bootstrap. On larger displays, such as desktop resolutions, I want the webpage to show the header and left navigation as normal. However, when the site is resized to that of tablets or mobile ...

javascriptjqueryhtmltwitter-bootstrap-3

Retrieve a property from a designated element within the DOM

Is there a way to specifically extract the src attribute of the second image in an HTML file using PHP DOM parser? foreach($html->find('img[src]') as $element) $src = $element->getAttribute('src'); echo $src; I s ...

phphtmlparsing

Allow iframe to be edited within jsfiddle

I have a question that I need to ask soon, but first I need an editable iframe in jsfiddle. It's working fine on my local machine, but not on jsfiddle. I believe it's because of the frames being used? On my local machine, I use: setTimeout(&apo ...

javascriptjqueryhtmliframejsfiddle

Decreasing the space between columns in Bootstrap 3

My objective is: However, the current layout appears like this (the issue isn't the bottom margins, I've already decided they should be smaller): The problem lies in the gutter size which is determined by padding, as indicated by the grey area ...

htmlcsstwitter-bootstrapgutter