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>