Stack two internal divs on top of eachother while possibly keeping float

I've found this question a few times, but normally the answer involves removing float, or the question was old enough that float wasn't in use. Also, I'm a first time css'er so please keep that in mind.

So, I have this fiddle: https://jsfiddle.net/u1ydxoqn/

I would like to continue using float (I think, I mean, I'm a css noob, so if it isn't a best practice please let me know.) What I'm trying to accomplish is having the yellow rightBottom div, placed exactly below the rightMiddle div.

Something like this:

In case for some reason jsfiddle disappears or someone can't access the site, here's 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>

---

在rightBottom上添加clear both

div.rightBottom {
    background-color: yellow;
    clear: both;
    float: right;
    padding: 5px;
}

链接地址: http://www.djcxy.com/p/88420.html

上一篇: 当height> max时忽略底部填充

下一篇: 在彼此之上堆叠两个内部div，同时可能保持浮动