Overlapping divs

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
lkloschinsky
Jr. Propeller Head
Posts: 1
Joined: Wed Feb 22, 2023 12:35 pm

Overlapping divs

Post by lkloschinsky »

I have an issue with overlapping divs and not sure how to correct it. In the same topic I have an img within a div that floats right and at the bottom of my topic there is another div for a note. The issue is that when I print to a pdf the img is being overlapped (cut off) by the 2nd div.note at the bottom of the topic which expands the full width of the page.
OverlappingDivs.png
So what do I need to do to correct this so the top div with the img displays the full img and the 2nd div.note automatically wraps around the img?
OverlappingDivs2.png
You do not have the required permissions to view the files attached to this post.
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Overlapping divs

Post by Psider »

Hmm I had this issue many years ago. I think maybe I added "overflow: hidden" to the note div style? But it was a long time ago so I could be mis-remembering.
doloremipsum
Sr. Propeller Head
Posts: 290
Joined: Mon Aug 26, 2019 2:11 pm

Re: Overlapping divs

Post by doloremipsum »

I believe you have a couple of options here:
1. Put all of the text, including the note, in the same div and float the image to the right of that. That will make sure the note remains "in bounds" and doesn't attempt to span the full width of the page.
2. Give the note style "clear: right" or "clear: both". This means that if there is anything floating to the right of it, the div will clear that before positioning itself. So the note will appear beneath the image and span the full width of the page.

To be fair I haven't tried either of these in PDF output, so I suggest you test it out and report back :D
in hoc foro dolorem ipsum amamus, consectimur, adipisci volumus.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Overlapping divs

Post by NorthEast »

Psider is correct.
By default, it will use overflow: visible which means the background (not text) will not be clipped to the size of the box.
Using overflow: hidden or overflow: auto will fix it.
I use auto, just in case the div contains content that don't fit inside it, as this will display scroll bars rather than hide the content too (for help, not PDF).
https://css-tricks.com/almanac/properties/o/overflow/
Post Reply