1

http://jsbin.com/egobu3

I tried putting 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.

ripper234
  • 222,824
  • 274
  • 634
  • 905

1 Answers1

6

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

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • 2
    Or have [one `float: left;` and the other `float: right;`: JS Bin demo](http://jsbin.com/egobu3/4/). – David Thomas May 01 '11 at 00:36
  • Be careful with the use of `inline-block` as IE6 doens't support it and IE7 may have some [issues](http://www.quirksmode.org/css/display.html) – Brombomb May 01 '11 at 04:43
  • @Brombomb: Thanks, I should have mentioned that in my answer. Both IE6 and IE7 can be coerced into working. See a recent answer of mine: http://stackoverflow.com/questions/5838454/inline-bloc-internet-explorer-7-6/5838575#5838575 – thirtydot May 01 '11 at 12:57