Is it possible to bottom align a floated div?

Question

I want to avoid using position: absolute; because I want to keep the functionality where when the parent container shrinks, the divs position themselves one under the other, instead of overlapping.

#container {
    border:1px solid;
}

#left {
    float:left;
    width:100px;
    height:100px;
    background:red;
}

#right {
    float:right;
    background:blue;
}

ul {
    padding:0;
    margin:0;
}

ul li {
    float:right;
    margin-left:20px;
}

<div id="container">
    <div id="left">
    </div>
    <div id="right">
        <ul>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
        </ul>
    </div>
    <div style="clear:both;"></div>
</div>

Edit: I've updated the code sample to more closely resemble what my own actually looks like. Unfortunately I'm not working with fixed widths/heights, though for this particular problem, the red div can have a fixed width/height.

Updated Fiddle: http://jsfiddle.net/zdL60bLu/10/

Basically, I'd like the blue div to be aligned to the bottom right, and when the window size shrinks, to keep the functionality of the blue div moving below the red div, which doesn't happen with position absolute.

Is this doable?

Answer 1

This layout can be done with flexbox.

It fulfills both your requirements:

• The blue div is aligned to the bottom right and

• When the window size shrinks, the blue div moves below the red div

  Except that when you set display:flex on a container, floats have no effect on the items. [so if you like you can even leave the float:left; and float:right on the left and right elements - but know that they do nothing]

  Note that float, clear and vertical-align have no effect on a flex item.

  (CSS-tricks)

Updated Fiddle (Resize to see the effect)

#container {
  border: 1px solid;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}
#left {
  width: 100px;
  height: 100px;
  background: red;
}
#right {
  float: right;
  /* redundant */
  background: blue;
  align-self: flex-end;
}
ul {
  padding: 0;
  margin: 0;
}
ul li {
  float: right;
  margin-left: 20px;
}

<div id="container">
  <div id="left">
  </div>
  <div id="right">
    <ul>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
    </ul>
  </div>
</div>

Answer 2

This is a little hacky, but it works: Give the right container a margin-top of the height of the left container minus the height of the right container (in this case, 50px). Then give the left container a negative margin-bottom of the same amount (-50px). Here is it working: http://jsfiddle.net/zdL60bLu/9/

Code added:

#left {
    margin-bottom: -50px;
}
#right {
    margin-top: 50px;
}