Greetings, I am currently working on creating a Resume in HTML. However, I seem to be facing an issue with the inline-block property as the two div elements that should be placed next to each other are not displaying as expected - one of them appears slightly lower than the other.
It appears to be a positioning problem, but I am struggling to identify the exact cause. The divs in question are related to S-boxes and L-boxes styles.
<!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: 0;
}
<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>
: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7aab2afa6aaaaa6a3b6a6aeb4f4f587bea6afa8a8e9a4a8aa">[email protected]</a>
</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 a collaborative team member.</p>
</div>
</body>
</html>