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

Passing image source from parent component to child component in Vue.js

I encountered an issue where I stored the image file name in a variable within the parent component and passed it to the child component using props. However, despite this setup, the child element is not displaying the image as expected. Here is the data ...

javascripthtmlvue.js

The Google Pie chart is displaying outside of the designated div area when placed inside a dropdown menu

Encountering an issue with my pie chart rendering outside of its parent div when placed within a dropdown menu. The chart successfully loads after the page is loaded, but only displays correctly if I hover over the dropdown and allow it to load. If I do ...

javascriptjqueryhtmlcssgoogle-pie-chart

Exploring elements in Javascript

I am attempting to retrieve values from various elements when a 'a' element is clicked. Consider the following code: <tr data-id="20"> <div class="row"> <td> <div class="btn-group"> <a data-checked= ...

javascriptjqueryhtml

Title appears to be left aligned instead of centered

My H1 is having trouble centering as I increase the font size. It positions correctly with a smaller size (30px), but when I increase the font, it becomes too low from the center even though text-align:center; is not helping to solve the issue. What adjust ...

htmlcss

Sliding out the sidebar menu with Jquery

Hey there! I'm currently working on implementing a swipe feature for the side menu bar. I have already added a click method in my code, but now I also need to incorporate a swipe technique. When the side bar is opened, I want to remove the inside im ...

javascriptjqueryhtmlcss

What causes HTML/Django template to run code in a non-linear fashion?

I was puzzled by the behavior of this particular html template I learned in an online class. It seemed to be executing out of order: The python form class is called using Django's syntax {{form}} which injects blank fields for user input (name, email ...

pythonhtmldjango

What are some ways to customize the text and button location for Bootstrap 5's file input?

Bootstrap 5's input type file seems too simplistic. Check it out here https://i.stack.imgur.com/VZ0h5.png I am curious about three things: Can the "Choose file" button be moved to the right? Is it possible to change the message that says "No files ...

csstwitter-bootstrapbootstrap-4bootstrap-5

Angular not firing slide.bs.carousel or slid.bs.carousel event for Bootstrap carousel

I've searched high and low with no success. I'm attempting to detect when the carousel transitions to a new slide, whether it's automatically or by user click. Despite my numerous attempts, I have been unable to make this event trigger. I ha ...

javascripthtmlangulartypescript

Displaying the structure of a MongoDB database using Express and Angular in a tabular format

I am looking to present the data from MongoDB in a table format using HTML along with Node.js, Express.js, and Angular.js. Currently, my approach is as follows: route.js app.get('/superhero', function(req, res) { superhero.superhero_list(r ...

htmlangularjsnode.jsmongodbexpress

Is there a way to reference a different CSS class within another class?

Currently, I am working on creating a navbar using React. In this navbar, I have three components for the menu bar: text, logo, and buttons. The background color of the navbar is set to transparent, while the components are black by default. However, whe ...

cssreactjsstyled-components

What is the reason behind the inability of this YouTube instant search script to enable fullscreen mode?

Looking to implement a Youtube instant search on my website, I came across this script that seems ideal for my needs. However, I'm facing an issue where the iframe is not displaying the allowfullscreen property. Can anyone assist with this problem? Th ...

javascriptjqueryhtmlajax

What is the best way to display noscript content within my Angular application?

What is the best way to show HTML content for users who do not have JavaScript enabled in my Angular application? Inserting the noscript tag directly into the index.html file does not seem to be effective. <body> <noscript>Test</noscrip ...

htmlangularnoscript

Is it possible to implement the SCSS CSS preprocessor in Angular 1.6.6, even though it is already utilizing LESS as the current CSS preprocessor?

Is it necessary to compile SCSS and Stylus files into CSS before importing them into my Angular version 1 app? Are there any other alternatives available? Context: I have two applications, one using Angular 4 with SCSS and the other using Angular 1 with L ...

cssangularjssassless

Legend alignment issue in Firefox disrupting Flexbox functionality

My fieldset has a legend containing text and a button. I am attempting to use flexbox to right-align the button within the legend. This setup works correctly in Chrome, but encounters issues in Firefox. I have managed to replicate the problem with a simpl ...

htmlcssflexbox

Am I on the right track with incorporating responsiveness in my React development practices?

Seeking advice on creating a responsive page with React components. I am currently using window.matchMedia to match media queries and re-rendering every time the window size is set or changes. function reportWindowSize() { let isPhone = window.matchMed ...

javascripthtmlreactjscss-grid

What is causing the #wrapper element to not fully contain all of its content within?

I am struggling to figure out why the wrapper on this page is not properly wrapping the content. It's only 332px tall for some reason when it should be the height of the content, which is causing the footer to pull up to the top of the page. Could I b ...

htmlcsswrapper

JavaScript library for creating animated car movements on a map using JPG images

Looking for a way to animate a car's movement on a map? I have a map image in jpg format (not svg) and a sequence of (x,y) points ready to go! If you could recommend a JavaScript library that can help me easily create an HTML page with this animation ...

htmlanimationjavascript

Styling applied exclusively to the field for mobile devices

As I work on creating a navigation bar using Bulma and Vue.js, I encounter an issue with the dropdown menu behavior. When the navbar collapses into the hamburger menu, the dropdown list remains in display: block; mode. To address this, I attempted a workar ...

cssvue.jsbulma

Discover the impact of images.google.com on enhancing your image gallery

I am currently working on creating a website that features an image gallery. When a user clicks on a thumbnail, I want a hidden div to slide out and display more information about the image, possibly even including a slideshow. After extensive searching o ...

jqueryhtmlcssimage-gallerygoogle-image-search

Combining jqueryUI autocomplete and datalist for enhanced user input options

My search form in HTML has a single input field where users can enter three different things: area name, trek name, or other keywords. For areas not in a database, I have implemented a datalist field (HTML) connected to the input for autocompleting the a ...

jqueryhtmlautocompletehtml-datalist