Positioning elements in HTML with CSS creates some problems when rendering the elements to be presented on a website. For example I came across this common problem with relatively positioned elements:

if you relatively position an element an empty space is created in the place where the element was supposed to normally appear

So how can we remove this white gap?

In order to examine this issue let us create an html page with 3 divs. One outer div which includes 2 other divs (div A and div B) and some text that follows the outer div. You can use the following html and css code to reproduce the result presented in the following image. I have chosen to set the background-color of the divs so we can easily identify them.

HTML

<div id="outer">
	<div id="a">A</div>
	<div id="b">B</div>
</div>
Some Text

CSS

div#outer 
{ 
    background-color: yellow; 
    width: 300px;
    border: 1px solid black; 
}
        
div#a 
{ 
    background-color: red; 
    color: white; 
    text-align: center; 
    line-height: 50px;
    width: 300px;
    height: 50px;
}
            
div#b
{
    background-color: black;
    color: white;
    text-align: center;
    line-height: 50px;
    width: 50px; 
    height: 50px;
}

Now suppose we would like div B to float over div A and be placed on the right like we can see on the image below

If we would like to use CSS positioning we could try to relatively position div B. The following HTML code could be used

<div id="outer">
	<div id="a">A</div>
	<div id="b" style="position:relative;top:-50px;left:250px;">B</div>
</div>
Some text

This code states the following:

1. position: relative => div B should be positioned relatively to the position that it should normally appear, which is under div A
2. top: -50px =>div B should be moved -50px vertically – this means that it will be moved upwards 50px
3. left: 250px => div B should be moved 250px horizontally – this means that it will be moved right 250px

So basically we would expect that everything is OK but when we visit our HTML page instead of the desired result we are going to see

As we can see div B actually appears in the desired position but there is a blank space beneath div A of 50px height (the height of div B if it would appear in its normal position).

Solution

The solution to this problem is to position the outer div relatively and to position div B with position absolute. The div is going to be positioned based on the last positioned element which is its outer div. The space is going to be disappeared and we will have the desired effect. The code that follows shows exactly what needs to be done.

<div id="outer" style="position:relative;top:0;left:0;">
	<div id="a">A</div>
	<div id="b" style="position:absolute;top:0;left:250px;">B</div>
</div>
Some Text