Strange position taken by div

Question

I have a strange situation where my middle div little down. Here is 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 very good at CSS, so this might be a little problem. I just can't find it.

Answer 1

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

This is the reason you see that each of your information divs corresponds to a baseline. Since the center div is lower in height, you get the space you see at the top.

To fix this:

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

The second problem that you are likely to encounter is that it is now aligned at the top, you have a “gap” at the bottom, without left or right borders. Either they have borders controlled by the full heights of divs, or they make all divs of the same height.

Answer 2

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

example

Answer 3

You can also try

 position:absolute; 

div inside the container and then specify

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

I always work with the absolute, hope this helps.

Answer 4

 #info2 { vertical-align: top } 

gotta do the trick.