I have a strange situation, where my middle \[code\]div\[/code\] is slightly downward.Here's a screenshot:
HTML :\[code\]<div id="footer"> <div class="content"> <div id="info1"> <img src="http://stackoverflow.com/questions/14056640/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="http://stackoverflow.com/questions/14056640/img/temp.png" alt="facebook" /><a href="http://stackoverflow.com/questions/14056640/#">Facebook</a> </div> <div> <img src="http://stackoverflow.com/questions/14056640/img/temp.png" alt="twitter" /><a href="http://stackoverflow.com/questions/14056640/#">Twitter</a> </div> <div> <img src="http://stackoverflow.com/questions/14056640/img/temp.png" alt="email" /><a href="http://stackoverflow.com/questions/14056640/#">E-mail</a> </div> </div> </div></div>\[/code\]CSS:\[code\]#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;}\[/code\]I'm really not that good at CSS, so it maybe a small problem. I just can't find it out.