While searching for a solution to my issue, I noticed that most responses involved removing the float property. However, since I am new to CSS, I would like to explore using float and see if it's the best approach.
Here is the fiddle I've been working on: https://jsfiddle.net/u1ydxoqn/
I want to position the yellow rightBottom div directly below the rightMiddle div, similar to this image:
https://i.sstatic.net/m3icT.png
In case the jsfiddle link becomes inaccessible, here is my current code:
HTML
div.myContainer {
background-color: teal;
overflow: hidden;
width: 500px;
}
div.barAcrossTop {
background-color: red;
padding: 5px;
}
div.rightMiddle {
background-color: orange;
float:right;
padding: 5px;
}
div.rightBottom {
background-color: yellow;
float: right;
padding: 5px;
}<div class="myContainer">
<p>
myContainer
</p>
<div class="barAcrossTop">
<p>
barAcrossTop
</p>
</div>
<div class="rightMiddle">
<p>
rightMiddle
</p>
</div>
<div class="rightBottom">
<p>
rightBottom
</p>
</div>
</div>