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

Get Help CSS
,
#1

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

Capture
Capture912×455 18 KB

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>
#2

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.

#3

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?!

#4

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.

#5

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

1 Like