Archived topic
Negative margin not affecting parent div's height? (Used to work)
5 replies · Started by NrH on May 24, 2021
Hi! I have an issue where in the previous version of GP with the Float-based system my layout worked but with the Flexbox system I can't figure out why the layout no longer works
I have a section that contains a div. Specifying a negative height on the child-div used to make the parent div's bottom-border go upward, putting the child-div "outside" of the parent div's container. My issue is exactly like the issue better explained in this thread: https://generatepress.com/forums/topic/landing-page-with-negatuve-bottom-margin/
My layout used to work with the Float-based system but now it no longer does and I can't figure out why it no longer does. Any help would be appreciated. Information added in the private information part in this thread
Thank you!!
Hi there,
You can try this CSS, feel free to adjust the number.
body #framsida-snabbval .framsida-snabbval-bottom-bakgrund {
height: 90%;
}Hi Ying I know I can fix the issue but I wonder why it no longer is working? What change breaks this layout? I can't figure out what's actually causing this issue. Tried changing the box-sizing of all the divs in the DOM-tree to no effect. What causes the issue?
Thank you!
It's just a different way to build the structure between float and flexbox.
You can google flexbox to have more information about flexbox.
The negative margin you applied to the icon's container will only bring the next section up, but won't affect the same-leveled items of the icons as they are under the same parent flexbox container.
I'll just mark this as solved. Guess it's some flexbox somewhere causing it
Thank you Ying!🙂
No problem :)
