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

Question

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!

Answer 1

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 2

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 3

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 4

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 5

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

Answer 6

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/