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

Question

I've been looking far and wide for this problem and finally found the solution on some obscure forum on page #10 of google. The solution is in the answer

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

    .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?

Answer 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/

Answer 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;

Answer 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.

Answer 4

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

Answer 5

set relative elememt top to parent font size like this code:

html in jade template:

div.dialog(id='login')
        div.dialog-header
            span.title login
            a.dialog-close(href="")  X
            hr
        div.dialog-body
            p hello this is body
            hr
        div.dialog-footer
            p this is footer

and css:

    .dialog
    {
        height: 100%;
        position: absolute;
        top: -100%;
        right: 50%;
        left: 50%;
        bottom: 100%;
        border: 2px solid rgba(255, 255, 255,1);
        border-radius: 3px;
        font-size: 14px;

    }   
.dialog-body{
        position: relative;
        background-color: #F99;
        height: 80%;
        top: -14px;
    }
    .dialog-header{
        position: relative;
        height: 10%;
        background-color: #F9F9F9;

    }
    .dialog-footer{
        position: relative;
        height: 10%;
        top: -28px;
        background-color: #F9fdf9;

    }

this worked for me!

Answer 6

Set the outer div as "position: relative" the div you want to move as "position: absolute" and set the top and left values. this will position the item relative to the outer div (not the page). relative position leaves gaps. absolute does not.

Answer 7

This did not work for me, having 4 separate interlocked by each other's relative positions. I could not get it working, even adding and repositioning each one:

Currently, this is optimized (see http://christ.eye-of-revelation.org/index.html 2nd page) but in all cases they are used to highlight an area of the image according to the media or window size…

The solution was global and much more easy; it was also used for two separate blocks to simulate and swap the two pages: all problems are solved defining in width and height a area, and just setting its style = "overflow:hidden;"

Hope this can help.

Answer 8

set height to 0: height:0px;.

Now this div can be placed anywhere.