Why the float: right is needed here? I think inline-block is sufficient

Hi,
I’m having difficulty in understanding why float: right is needed to solve this puzzle, I think display: inline-block is sufficient since it doesn’t add a new break after the element, so the next element should come inline.
It’s in the challenging questions at the end of Typography chapter. Link: https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-web-development-fundamentals/modules/fecp-learn-css-typography/lessons/learn-css-code-challenges/exercises/display-challenge

Here you are the full code:

<meta charset="utf-8">

<title>CSS Challenge 3</title>

<style>

  body {

    background-color: rgb(239, 217, 202);

    }

  #box {

    border: 10px solid black;

    width: 200px;

    height: 200px;

    margin: 25% auto;

    } 

  #left {

    border: 5px solid red;

    width: 90px;

    height: 190px;

    display: inline-block;

    }

  #right {

    border: 5px solid blue;

    width: 90px;

    height: 190px;

    float: right; /*I think this line is unnessary!*/

    }

</style>
<div id="box">

  <div id="left">

  </div>

  <div id="right">

  </div>

</div>

Hello @count_dorian, welcome to the forums! Does it work with display: inline-block? float is usually used in these cases-when you want two things to be horizontally next to each other.

It works only if I made the second object (the blue one) float: right, if I didn’t do that they won’t come inline which is very weird since I already added the inline-block property to the red object. Additionally, even if I add the inline-block property to both of them, still I need to make the blue object float: right.
I strongly believe that float: right is not needed at all, though they won’t get inline unless I add it?!

With this I am not entirely sure, but I think it is because float: right forces the box to go up and to the right. Which then forces it inline. inline-block does not. Also, you ought to check the margin, padding and border of these elements. Here is some reading on it.

Thank you Aidan, I’ve checked padding, border and the rest of those features, tried to understand why float is necessary here.

1 Like