Reputation: 7759

Weird position taken by a div

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

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.

Upvotes: 6

Answers (4)

David Barker

Reputation: 14620

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.

Upvotes: 5