How to remove whitespace that appears after relative positioning an element with CSS

css layout whitespace

57,059

Solution 1

You can simply solve this by applying a negative margin that equals the width or height of the element.

For an element of 100px height that is positioned to the top you will apply margin-bottom:-100px;

For an element of 100px height that is positioned to the bottom you will apply margin-top:-100px;

For an element of 100px width that is positioned to the left you will apply margin-right:-100px;

For an element of 100px width that is positioned to the right you will apply margin-left:-100px;

cut & paste css snippets:

.top 
    {
    postion:relative;
    top:-100px;
    height:25px;
    margin-bottom:-25px;
    }
.bottom
    {
    postion:relative;
    top:100px;
    height:25px;
    margin-top:-25px;
    }
.left
    {
    postion:relative;
    left:-100px;
    width:25px;
    margin-right:-25px;
    }
.right
    {
    postion:relative;
    left:100px;
    width:25px;
    margin-left:-25px;
    }

And the reworked example code becomes then:

.thetext 
{
    width:400px;
    background:yellow;
    border: 1px dashed red;
    margin:50px;
    padding:5px;
    font-weight:bold;
}
.whiteblob
{
    position:relative;
    top:-140px;
    left:70px;
    width:200px;
    height:50px;
    margin-bottom:-50px;
    border: 4px solid green;
    background:white;
    font-size:2.5em;
    color:red;
    
}
.footerallowedwhitespaceinblue
{
    height:10px;
    background-color:blue;
}
.footer
{
    background-color:grey;
    height:200px;
}

<div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script>
</div>
<div class="whiteblob">
    &nbsp;buy this!
</div>
<div class="footerallowedwhitespaceinblue">
</div>
<div class="footer">
</div>

http://jsfiddle.net/qqXQn/1/

Solution 2

Here is an example. In this case, the object was moved to the right and then up using a negative top value. Eliminating its trailing margin space required adding an equal negative-margin value.

 position:relative;
 width:310px;
 height:260px;
 top:-332px;
 margin-bottom:-332px;
 left:538px;

Solution 3

If you are brave enough, you may put overflow:hidden; and a bottom negative margin on relatively positioned element, and it will remove the spacing leftover :) i.e. on responsive site.

But do check it doesn't hide a needed content.

Solution 4

You can solve this problem by giving float:left before position:relative. Use margin-left, margin-top properties instead of top, left also.

View more solutions

57,059

Author by

Tschallacka

In the summer of '99 I started to become more interested in the programs that made the computers run and my father bought me a couple of books on programming and I started reading and experimenting with it. The hardest part was understanding how variables worked. This was in the time before you could go to the internet to answer any question because google didn't exist yet, and I didn't know where to look. I remeber vividly tossing the Java step by step book frustrated in a corner because it was that little understanding that hindered me from understanding the rest. It lay there for 4-6 months until suddenly, when I had all but forgotten about it it clicked in my head and I understood how variables worked. I got the book up and started reading, and suddenly I could understand how it worked, how it translated and a world opened for me. The year that followed I learned, Java, Perl, HTML, JavaScript, C++, Visual Basic, PHP and possibly a few other programming languages I have forgotten about. It was the basis for my understanding the digital world. A couple of projects I remember making are a forum, a remake of pokemon in javascript with map creator, a room walk through like you happen to see on a lot of house buying websites, a direct x 7 game in C++, a book record keeper in java to keep track of the books I had. From there I kept doing a couple of hobby projects off and on, started several relatively successful fora and stopped them when the trolls found them and turned the entire place toxic and stressful, had some websites for fun where I would gather jokes, that site had a lot of CSS things in it I had experimented with, another was to gather and display poems. I discontinued them at some point because I didn't wish to pay for the server costs anymore for sites that I rarely used anymore and didn't have that many users/visitors. I was able to get a job at a company as a programmer and there my skills deepened by having more contact with other programmers and learning about other possibilities and how to cooperate with them, take the lead in some aspects, and follow the lead in others. After that job I went on to another job where even more responsibility was put on my shoulder by transforming a static html site that was updated by frontpage into a dynamic responsive website, without a team to fall back on. This was a pretty challenging thing because I had to combine a lot of varied items into one coherent thing. During these jobs I also started coding a Minecraft Mod, Magic Cookies and had great fun exploring how to expand Minecraft functionality with my ideas. Basically the entire mod is a test bed of me trying to see what is possible within Minecraft code. I had great fun figuring out how large structures are rendered like nether temples and recreated my own with my dark temple that spawns in the nether, the same way a nether structure does, without having to rely on chunks being loaded like normal spawning of buildings do.

Updated on February 09, 2020

Comments

Tschallacka over 4 years

The problem occurs is the following: After relative positioning an element with CSS I get a white-space of where the element was... I don't want the white-space!

    .thetext 
    {
        width:400px;
        background:yellow;
        border: 1px dashed red;
        margin:50px;
        padding:5px;
        font-weight:bold;
    }
    .whiteblob
    {
        position:relative;
        top:-140px;
        left:70px;
        width:200px;
        height:50px;
        border: 4px solid green;
        background:white;
        font-size:2.5em;
        color:red;
        
    }
    .footerallowedwhitespaceinblue
    {
        height:10px;
        background-color:blue;
    }
    .footer
    {
        background-color:grey;
        height:200px;
    }

<div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script>
    </div>
    <div class="whiteblob">
        &nbsp;buy this!
    </div>
    <div class="footerallowedwhitespaceinblue">
    </div>
    <div class="footer">
        The whitespace above is way to big! The buy this still takes up space whilst it is moved.
    </div>

JSFiddle: http://jsfiddle.net/qqXQn/

As you can see in the example, the only whitespace I want is the whitespace caused by the thetext block by the margin of 50px; and the spacing by the footerallowedwhitespaceinblue(made blue so it's visible). The problem is... the whitespace is too big now because the "buy this" div still takes up space after it's been relatively positioned.

How do I solve this?

Liam about 2 years

Does this answer your question? position:relative leaves an empty space

user256604 over 10 years

This is so helpful, its exactly what I needed to get rid of the whitespace / padding underneath my div (position: relative)
Tschallacka over 9 years

Absolute gives issues with dynamic page flow layout. Text wont flow around an absolute positioned item. It will around a relatively positioned item.
Tschallacka about 8 years

Yea... this doesn't work for stuff you don't want floating though.
Kevin Doyon almost 5 years

Nice! For some reason, a negative margin didn't work for me, but this did!