Search code examples
htmlcsspositionalignment

What is wrong with my positioning? (jsfiddle included)

This is what I want VS what I have: enter image description here

https://jsfiddle.net/fs0vydgd/

    <div class="left-align">
  <div class="songListContainer">

<div id="outerBoundingBox">

    <img src="https://s-media-cache-ak0.pinimg.com/736x/ec/8d/bc/ec8dbcafb4aad7d54bbae197867c6c7c.jpg" class="albumArt" />

    <div class="songTitle"><a href="">Artist</a> - <a href="">Song name here</a></div>

    <div class="songDetails"><a href="">Year: 2002</a>  <a href="">Genre: Punk</a> <a href="">Album: Title</a></div>

    </`div`></`div`></`div`>

I am trying to recreate an old website I worked on ages ago. I still have a screenshot of the layout which you can see. The album art image displays perfectly fine, but the lines of text with the song description don't line up appropriately. Even manually assigning margins has proven unsuccesful. My guess is that I have a problem with my parent/child setup in the way I am using display:inline-block, but I have tried multiple combinations to no success.

This is a difficuilt question to ask and better illustrated in the screenshot and JSfiddle provided.

Thanks for any help, I have not been able to find information regarding this specific case.

Solution

  • Start with adding float: left to .albumArt, I think you might already get a lot closer to your desired result.

    Fiddle