Tribute Page: Can't get two inline-block objects to sit on the same line

[himlayyy]

Tell us what’s happening:
Describe your issue in detail here.
Hello all.
I have an img class and a div “album-blurb” with display:inline-block to make them sit on the same line, but they’re not. I would appreciate any help. Thanks!

Your code so far
Here’s the link to my code

YzxMQEX

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36

Challenge: Build a Tribute Page

Link to the challenge:

freeCodeCamp.org

[DavidMatthewFraser]

try this:

.album-era{
  border:1px solid blue;
  margin:20px;
  display: flex;
  flex-direction: row;
}

I really like to use css Flexbox for things like this

A Complete Guide to Flexbox

[lasjorg]

I agree that using flexbox or grid would be much better.

In any case, you have to give .album-blurb a width as well. But I really wouldn’t suggest using inline-block for this.

[himlayyy]

Hey that worked, thanks a lot!

[himlayyy]

Blockquote I really wouldn’t suggest using inline-block for this.

Why’s that?

[lasjorg]

It’s old-school and not really needed for layouts anymore. Both flexbox and CSS grid are much better at this and your CSS will be cleaner and more maintainable. I highly suggest learning both, but I would start with flexbox.

There are also issues related to using inline-block that you need to know about (just like there are with the old float-based layouts). It mainly has to do with the white space you get with inline-block elements.

If you give both inline-block elements 50% width you will see they do not sit side by side as expected because of the white space. One “fix” that was sometimes used was to set the font size on the parent to 0 and then reset it back as needed on the children again.

<div class="container">
  <div class="inline-block">Child</div>
  <div class="inline-block">Child</div>
</div>

/* keep this */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  /* remove this to see the effect */
  font-size: 0;
}

.inline-block {
  display: inline-block;
  background: green;
  border: 2px solid red;
  width: 50%;
  font-size: 1rem;
}