Div overlaps text in mobile preview

stop divs from overlapping on resize
position: fixed div overlap when scrolling
prevent divs from overlapping vertically
divs overlapping on mobile
sibling divs overlapping
two divs overlapping each other
stop image overlapping div
child div overlapping parent

I have a div block which contains an image and text:

<div style="position: relative; margin-bottom: 90px;"><img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png" style="width: 112px;">
<div style="position: absolute; top: 50px; left: 78px;">
<p style="font-family: AvenirLight; color: #74818a; font-size: 36px; line-height: 45px; font-style: italic;">"Enabling understanding means being able to communicate effectively"</p>
</div>
</div>

I've applied margin-bottom: 90px; on the parent div to create a gap between the div and any p tags which may be below it.

It works fine on full display, but on mobile, it looks like this:

As you can see, it's overlapping the following p tags after the div. How can I fix this? Ideally I want a 20px gap between the parent div and anything outside the div.

Edit:

I feel like my approach is wrong. I.e. if I remove margin-bottom: 90px; from the code above, the div will still overlap any following p tags:

The reason why other elements are overlapping your quote element, is because the element which is primarily deciding the height of the element (the div which contains the paragraph) is having an absolute position. An absolute positioned element is no longer part of the parent (unless the parent has a relative position). So, in this case, because the div with the paragraph is no longer 'part' of the parent, the parent will only have a height based on the static/relative positioned elements. Which is the image.

As a solution you can switch the absolute position of your p element to the img element. You know the width and the height of the image, so you can set a padding for your paragraph element. In this case the height of the parent div (which is called .quote-wrapper in my example) will have the correct height so elements above or below .quote-wrapper won't overlap your element.

.quote-wrapper {
  padding: 40px 0;
}

.quote-wrapper .quote-image {
  width: 120px;
  height: 100px;
  position: absolute;
}

/* Set position to relative so the element won't be overlapped by the image */
.quote-wrapper > p { 
  font-family: AvenirLight; 
  color: #74818a; 
  font-size: 36px; 
  line-height: 45px; 
  font-style: italic;
  padding: 80px 0 0 80px;
  margin: 0;
  position: relative;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div class="quote-wrapper">
  <img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png" class="quote-image" />
  
  <p>
    "Enabling understanding means being able to communicate effectively"
  </p>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

divs overlapping in mobile view, Hello all, I've got a slight issue with two divs overlapping in mobile view on this site which is in it's initial apart from the picture and form divs which when the layout shrinks down to fit a mobile screen the form Preview Exit Preview <​meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <style> @media only screen and (max-width: 480px) { div > span { font-size: 80%; line-height: 120%; } } </style> Then in the html I will do this for fonts I want to uniformly resize:

You can put margin-top inside the tag p. I recommend that you put an id or class for each tag (div,p...), to make the structure easier and that labels do not overlap.

web-design, content section--> <div id="content"> <div class="text-left"> <h2>TEXT GOES I prevent the divs from overlapping on a screen or browser re-size yet maintain  Stack Overflow Public questions and answers; Teams Private questions and answers for your team; Enterprise Private self-hosted questions and answers for your enterprise; Talent Hire technical talent

Try editing your html code this way and add this media query to your code.

<div style="position: relative; margin-bottom: 90px;"><img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png" style="width: 112px;">
  <div style="position: absolute; top: 50px; left: 78px;" class="quotation">
    <p style="font-family: AvenirLight; color: #74818a; font-size: 36px; line-height: 45px; font-style: italic;">"Enabling understanding means being able to communicate effectively"</p>
  </div>
</div>

@media screen and (max-width: 767px) {
  .quatation {
    position: static !important;
  }
}

Handling Long and Unexpected Content in CSS, However, when the area is not big enough, the text will overlap the icon. But for smaller sizes like mobile or tablet, this will cause a horizontal  Hi all, My CSS problem: The text links in my right colum ("#iiicolright" - in a 3 col layout) is overlapping the content that appears below in on page.

The problem is that is position absolute on title. i recommended following structure for free hesitate for all resolutions and devices.

.block-quote {
    display:block;
    margin:0;
    padding:20px 0 0 70px;
    background:url(https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png) 0 0 no-repeat;
}

h2 {
    font-family: 'AvenirLight'; 
    color: #74818a; 
    font-size: 36px; 
    line-height: 45px; 
    font-style: italic;
}
<div class="block-quote">
    <h2>"Enabling understanding means being able to communicate effectively"</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin vulputate vehicula. Morbi fermentum elit lobortis nibh molestie, nec facilisis elit tempor. Nullam porta lectus erat, et hendrerit diam dictum at. Vestibulum sed enim turpis. Sed vehicula venenatis cursus. Mauris sit amet venenatis velit. Nullam ut purus erat. Nam posuere lorem at est ultrices luctus.</p>
</div>

Responsive Design, Mobile: http://codepen.io/mtedwards/pen/DJtnx. Any ideas how to achieve this? Thanks In the container div you can place your text there. I also tried combining with what cocodillondid but then The text and image overlap. Preview: Description: A pure CSS overlapping slideshow which allows you to slide html slides left or right while covering the previous one. Heavily powered by radio input hack and CSS3 animations.

HTML footer overlapping body content - HTML-CSS, I have a page with 2 divs (content and printFooter). The problem I'm having is that the footer is overlapping the content text in website. Learn how to overlap Image and Text in this tutorial. We'll also move the Image and Text on hover as well as make adjustments for tablet/mobile.

Why does my header overlap other elements when i mark its , However, when I add the position: fixed property, the header overlaps the elements also, my auto margin for the header (set at the div selector) disappear when i add the <head> <link type="text/css" rel="stylesheet" href="stylesheet.​css"/>  CSS Text Overlap. One of the important functions of CSS is to position elements. Margin, padding, top, left, right, bottom, position, and z-index are just a few of the major players in CSS positioning. By using the above spacing properties and the z-index "layering" property, we can make your elements overlap each other.

Overlapping Images Using CSS Positioning, <h1 class="text-center">Overlapping images demo</h1> I am also hiding it on mobile because it is not needed when stacked. -make-the-wrapping-div-​element-with-relative-position-match-child-elements?rq=1 --> Code Snippet Preview. If you remove the redundant height setting on #panel1 then the divs won’t overlap. If you don’t want the divs to reposition on smaller windows, then sit a minimum width on their container.

Comments
  • Do you have styles that apply only for mobile/small screen sizes? Are there differences in the styles applied to the elements when you inspect them in browser and mobile?
  • @Kaddath - Nope, because I feel like my original approach is wrong. I've edited my answer to explain.
  • Does the quotation have to be set to position absolute or can you change it to relative?
  • I think the reason why this happens is because you assume that the big grey text won't take more than 50px height (cf position: absolute; top: 50px;) But with a smaller screen size text goes to new line more often and gets bigger than this value. If i have anything as a soluition i'll update