Question

jsFiddle

HTML

<div id="a">
  <div id="b">bbb</div>
  <div id="c">ccc</div>
</div>

CSS

#a {
  border: 1px solid black;
   *zoom: 1;
}
#a:before, #a:after {
   display: table;
    content: "";
    line-height: 0;
}
#a:after {
  clear: both;
}

#b {
  float: left;
  font-size: 36px;
  background-color: blue;
}

#c {
  float: right;
  background-color: red;
}

I want the red box (#c) to be aligned to the bottom-right corner.

If I add position:relative to #a and position:absolute;bottom:0;right:0 to #c it works, but as soon as I add it the blue box as well the container (#a) collapses. I don’t know which is going to be taller, #b or #c so I want to apply the positioning to both of them. The usual clear-fix doesn’t work on absolutely positioned elements.

So how do I position #b to the bottom-left, and #c to the bottom-right without collapsing the container div #a?

Answer 1

Well, this is pretty esoteric solution, but it works 🙂

Setting both #b and #c inline-block so they work with each other like regular inlines and we can use vertical-align. Then adding text-align:justify; to container and :after with width:100% to pull #b and #c to the left and right sides. Setting font to zero for container (and restore it in inner blocks) to avoid under/over-line and other gaps and set zero font to :after.

#a {
  border: 1px solid black;
  text-align:justify;
  font-size:0;
  line-height:0;
}
#a:after {
  content:"";
  display:inline-block;
  width:100%;
}

#b, #c {
  display:inline-block;
}

#b {
  vertical-align:top;
}
#c {
  vertical-align:bottom;
}

font-size:0; looks not working in IE, so we need little workaround with 1px negative margin:

/* ie fix */
#a {
  font:1px/0 sans-serif;
}
#b, #c {
  margin:0 0 -1px;
}

Fiddle: http://jsfiddle.net/gv4qd/35/