inline-block vertical positioning issue

Question

Hi I am developing a Resume in HTML. I am having problem with my inline-block as both the div that are required to be placed with each other using inline-block are not showing the expected results one of the div slightly moved downwards.

It seemed to be some sort of positioning issue but I am unable to figure it out. The div are concerned with S-boxes and L-boxes style

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8/>
<title>HELLO STRICT</title>
<style>
<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->


article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section 
{
    display: block;

} 
h1{
    color: #906;
    font-family: "Arial Black", Gadget, sans-serif;
    margin-bottom: 0px;
}
h4{
    margin-bottom: 0px;
    margin-top: o;  

}

<style> 
time 
{ 
font-style: italic; 
} 

li {
    padding-left: 0px;
    text-indent: 0em;
}
div.S-boxes{
    width: 200px;
    height: 150px;
    background-color: #E8E8E8;
    display: inline-block;

    text-align: right;

}

div.L-boxes{

    width: 500px;
    height: 150px;
    background-color: #E8E8E8;
    display: inline-block;

}
p.inbox{

    margin-top:16px;


}

</style> 
</head>
<body>


<h1>Muhammad Qais</h1>
<div>
  <ul style="list-style: none; padding-left: 0px;">
    <li>Village Sooj Bahadar, P.O. Mandra.
    <li>Tehsil Gujarkhan
    <li>District Rawalpindi
    <li>Pakistan
  </ul>
  <table>
        <tr>
             <td>
                     <img src="Telephone-icon-1-.gif" width="27" height="27">
            </td>
            <td>
                : +92-347-9714967
            </td>
    </tr>

            <tr>
                <td>
                <img src="letter_closed.png" width="27" height="27">
                </td>
                <td>
                : muhammadqais32@yahoo.com
                </td>
            </tr>
  </table>

  </div>

<div class="S-boxes">
            <h4>Objective</h4>
    </div>


 <div class="L-boxes">
        <p class="inbox">Seeking  a challenging opportunity where I will be able to utilize my strong organizational  skills, educational background, and ability to work well with people, which  will allow me to grow personally and professionally. I am self-motivated and  able to work both independently and as collaborative team member.</p>
</div>


</body>



</html>

@Humanlove thanks that worked for me. but whats the reason for that? — Faisal Naseer, Mar 22 '14 at 20:38
the default value of inline-block is baseline that's why we need to define vertical-align:top, check this developer.mozilla.org/en/CSS/vertical-align — Ali Nouman, Mar 22 '14 at 20:43
possible duplicate of [CSS: unexpected vertical position of "inline-block" elements](http://stackoverflow.com/questions/4827977/css-unexpected-vertical-position-of-inline-block-elements) — Hashem Qolami, Mar 22 '14 at 20:49

score 3 · Answer 1 · edited Mar 22 '14 at 23:45

3

display: inline-block; helps us here to render two square gray boxes next to each other. Awesome, right? However, with varying content, we need to add the property vertical-align: top to make sure everything is aligned to the top.

div.S-boxes{
    width: 200px;
    height: 150px;
    background-color: #E8E8E8;
    display: inline-block;
  vertical-align:top;
    text-align: right;

}

edited Mar 22 '14 at 23:45

Ilya Streltsyn

13,076
2
37
57

answered Mar 22 '14 at 21:08

Arjun Chaudhary

2,373
2
19
36

score 0 · Answer 2 · 2019-09-10T06:34:59.110

0

div.S-boxes{
        background-color:#FFF;
        width:20px;
        height:20px;
        display:inline-block;
        border:solid black 1px;
    }

    div.L-boxes{
        background-color:#FFF;
        width:20px;
        height:20px;
        display:inline-block;
        border:solid black 1px;
    }

edited Sep 10 '19 at 06:34

answered Aug 27 '19 at 13:53

With some description, this answer would be even better. Perhaps explain how and *why* your answer differs from the current answer. – Druckles Aug 27 '19 at 14:13

inline-block vertical positioning issue

2 Answers2

Linked

Related