Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 16, 2015 at 3:25 pm #520038
    essentialifecoaching

    Hi! Great theme!
    I used some code from another forum poster who was also trying to get divs to overlap. I used this code:

    .overlap{
   position:relative;
   bottom:200px;
   left:150px;
}

    The problem is that when I use it to move a div upwards to overlap another div, it leaves a big gap below it (light blue on my home page: http://www.essentialifecoaching.com/). I’ve moved everything up to compensate for that 200px gap, but now it’s just hanging out there right above my footer. Can you help me to remove this gap, or would making the footer taller close the gap?

    Thanks!

    October 16, 2015 at 3:56 pm #520071
    Yigit

    Hey essentialifecoaching!

    You do not need to use custom CSS code. Please edit your column and check “Custom top and bottom margin” and enter negative top margin value to your column element – http://i.imgur.com/7VAxv6s.png

    Best regards,
    Yigit

    October 16, 2015 at 5:50 pm #520193
    essentialifecoaching

    Thanks for your quick response! That is a great and simple fix for the vertical overlap, but now it appears that the first layout element in the overlapping row is being ignored (it just contains an invisible white space content element) and the visible overlapping element is now too far to the left. Do you know what might be causing this?

    Thanks!

    October 17, 2015 at 7:02 am #520364
    Rikard

    Hi,

    I’m not sure what you are trying to do there, could you post a screenshot highlighting your intentions please? You can upload to a service like imgur.com and then link to the image here.

    Best regards,
    Rikard

    October 17, 2015 at 11:23 pm #520488
    essentialifecoaching

    What it looks like with the custom css mentioned above is this:
    here

    Which is exactly what I want it to look like, but it leaves a big blue swatch at the bottom of the page, above the footer. You can see it on the website right now at here

    Following the solution provided above, the elements overlap, and the blue space at the bottom of the page no longer appears, but the image of the dock moves over to the left for some reason.

    October 19, 2015 at 10:07 am #520783
    Ismael

    Hey!

    Cool layout. Did you fix the issue? This is what I see when I check the site:

    I don’t see any “blue space at the bottom of the page”.

    Best regards,
    Ismael

    October 20, 2015 at 5:24 pm #521866
    essentialifecoaching

    Yes! I managed to finagle a solution by putting the overlaying div in it’s own layout element. Problem solved, thanks!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Overlapping divs leaves blank space below’ is closed to new replies.