How do I make the lower two divs be on the same line?

http://jsbin.com/egobu3

I tried pu开发者_如何转开发tting display:inline, but this had the side effect of shrinking the divs. Basically I want one wide bar, and two narrower areas below that will together be the same size.

Simply add float: left to .b and .c.

.b, .c {float: left}

http://jsbin.com/egobu3/2

Alternatively, add display: inline-block to .b and .c:

.b, .c {display:inline-block}

And remove the whitespace in the HTML:

<div class="b">BBBB</div><div class="c">CCCC</div>

http://jsbin.com/egobu3/3