I'm creating a page and using CSS in a content editor to customize. I have a title webpart, list web part, and a show all / hide webpart that I'm using JavaScript to reveal a 2nd list and hide the first list mentioned.

I have the list web part with a graphic behind it and added padding to the top and bottom. I then position: relative the title and show/hide to be moved on top of the graphic.

My issue is I now have gaps where the web parts were prior to me position:relative. I've done some research and some say to add a margin-bottom: or margin-top: to compensate but nothing happens when I add that to my code.

Any help would be great.


1 Answer 1


I actually finally figured it out.

I couldn't use display:none because I still needed the webpart to display. The key to get the negative margin to work was float left. I never tried this because I wanted my items centered. Adding a width 100%; aligned it back up and now I have no blank areas from where the webparts were!

My code giving me blank areas:

position: relative;
top: -150px;

How to fix it:

position: relative;
float: left
width: 100%;
top: -150px;
margin-top: -150px;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.