user6540251 user6540251 - 3 months ago 9
CSS Question

inline-block moving other inline-block downwards and vertical-align: top not working

I have two inline-block elements (one

<img>
element and one
<div>
element) and the
<div>
element is pushing the
<img>
element downwards like so: image of issue

Here is the relevant code in CSS:

#audio-section #audio-links li img {
width: 46%;
margin-right: 80%;
height: 100%;
margin: 5% 78% 2% 4%;
display: inline-block;
vertical-align: top;
}

#audio-section #audio-links li #responsive-audio-text {
display: inline-block;
width: 45%;
margin: 100px 0px 0 400px;
float: right;
}


and HTML (with
<img>
inside
<a>
tag):

<section id="audio-section">
<ul id="audio-links">
<li>
<div id="responsive-audio-text">
<h6>AuraPlus[+]</h6>
<p>Mixed by:<br>
Composed by:<br>
Tracks:<br>
</p>
</div>
<a href="https://soundcloud.com/rapfavs/sets/coloringbook" target="_blank"><img src="http://images.complex.com/complex/image/upload/t_article_image/chance-the-rapper-coloring-book-cover_gpzfqr.jpg" alt="DO LATERRR"></a>
</li>
</ul>




Also, here is the updated jsfiddle: https://jsfiddle.net/30go7uvz/6/

NOTE: I have researched this and tried vertical-align: top (as this was a common answer to the same issue and several other questions). However, this did not work. Perhaps I used it wrong, or there is another reason for its not working? Additionally, applying
position: absolute
to the text fixes the issue, but this is not viable due to its showing up over the header upon scrolling.
Any help would be greatly appreciated.

Answer

Adjust your margin properties:

#audio-section #audio-links li img {
    width: 46%;
    height: 100%;
    margin: 5% 0 2% 4%;
    display: inline-block;
    vertical-align: top;
}

#audio-section #audio-links li #responsive-audio-text {
    display: inline-block;
    width: 45%;
    margin: 100px 0px 0 0;
    float: right;
}

As you have it, the margins are forcing a great deal of space next to the inline-block elements, especially for the div. You've got 400px of margin to the left of it.... meaning they aren't fitting on the same visual row. By correcting the margins, they align as expected.

fiddle update

Comments