I am facing alignment issues with an image and a container placed next to each other. The rest of my website uses inline-block without any problems.
If someone could provide guidance on how to resolve this, it would be greatly appreciated.
Below is the snippet of my code:
.talentcontainer {
width: 960px;
height: auto;
margin: 0 auto;
background-color: #fff;
}
.talentimg {
width: 250px;
height: 280px;
max-width: 80%;
text-align: center;
display: inline-block;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* future proofing */
-khtml-border-radius: 10px;
/* for old Konqueror browsers */
overflow: hidden;
margin: 0 auto;
}
.talentcontent {
width: 450px;
height: auto;
max-width: 80%;
text-align: center;
display: inline-block;
background-color: #000;
margin: 0 auto;
min-height: 280px;
margin: 0 auto;
}<div class="talentcontainer">
<div class="talentimg">
<img src="http://i.gyazo.com/1d998394554d8c58d5b504ff959c3528.png">
</div>
<div class="talentcontent">
<h8>NAME HERE</h8>
</div>
</div>Additionally, I have attached an image depicting the issue at hand: