Weird position taken by a div

Question

I have a strange situation, where my middle div is slightly downward. Here's a screenshot:

HTML :

<div id="footer">
    <div class="content">
        <div id="info1">
            <img src="img/temp.png" alt="About me" />
            <h4>About Me</h4>
            <p>this is about me section</br>and this is the other line</br>and this is a third line</p>
        </div>
        <div id="info2">                                            
            <h4>Random Photos</h4>
            <div id="randomPhotos"></div>
        </div>
        <div id="info3">
            <h3>Follow Me</h3>
            <div>
            <img src="img/temp.png" alt="facebook" /><a href="#">Facebook</a>
            </div>
            <div>
            <img src="img/temp.png" alt="twitter" /><a href="#">Twitter</a>
            </div>
            <div>
            <img src="img/temp.png" alt="email" /><a href="#">E-mail</a>
            </div>            
        </div>
    </div>
</div>

CSS:

#info1, #info2, #info3
{    
    padding: 10px;
    display:inline-block;
}

#info1
{
    width:20%;
}

#info1 img
{
    margin-right:3px;
    width:20px;
    height:20px;
    background-image:url('../img/glyphicons-halflings.png');
    background-repeat:no-repeat;
    background-position:-162px 1px;
}

#info1 img, #info1 h4
{
    display:inline-block;
}

#info2
{
    width:55%;
    border-left:1px solid gray;
    border-right : 1px solid gray;
}
#info3
{
    width:15%;
}

#info3 img 
{
    width:20px;
    height:20px;
    margin-right:5px;
}

#info3 img[alt="facebook"]
{
    background : url('../img/result.png') no-repeat 0px -30px;    
}

#info3 img[alt="twitter"]
{
    background : url('../img/result.png') no-repeat 0px -60px;
}

#info3 img[alt="email"]
{
    background : url('../img/result.png') no-repeat 0px 0px;
}

#info2 div 
{
    padding:3px;

}

#randomPhotos 
{
    height : 100px;
}

I'm really not that good at CSS, so it maybe a small problem. I just can't find it out.

Answer 1

Most browsers, for elements using display:inline-block will automatically use vertical-align:baseline on that element unless you use a CSS reset (that will probably also define the defacto standard as vertical-align:baseline.)

This is the reason for what you are seeing, each one of your info divs is aligning to the baseline. As the central div is smaller height wise you get the gap you are seeing at the top.

To fix it:

#info1, #info2, #info3
{    
    padding: 10px;
    display:inline-block;
    vertical-align:top;
} 

The second problem you will probably encounter is that now it is aligned top, you have a 'gap' at the bottom with no left or right borders. Either have the borders managed by the full height divs or make all the divs the same height.

Answer 2

I suggest you to add float: left to each of your divs. This solve your problem.

example

Answer 3

You could also try to

position:absolute;

the divs inside the container and then specify

top:0px;
left: (left div with)px;

I am always working with absolute, hope it helps.