Block positioning / layout question

I'm trying to make the transition from tables to CSS, and I need
someone to explain how to achieve the following layout (understanding
the concepts behind this layout will help me considerably in grokking
CSS positioning):

http://unifiedmind.com/images/css-example.gif

In this example, boxes one and two are wrapped in a box that is 100%
wide.

Box 1:
- variable width (varies by line length)
- nowrap

Box 2:
- 100% of remaining width

Box 2a;
- 50% of box 2

Box 2b:
- 50% of box 2

Thanks.

Brian wrote:

James Thornton wrote:

I'm trying to make the transition from tables to CSS, and I need
someone to explain how to achieve the following layout (understanding
the concepts behind this layout will help me considerably in grokking
CSS positioning):

http://unifiedmind.com/images/css-example.gif

Box 2:
- 100% of remaining width

Width: auto, which is the default. If box 2 will fit, it will sit to
the right of box 1, because box 1 is floated left. So no styles are
needed here.

Box two does fit, but when I give 2a and 2b each a width of 50%, it
appears that they are 50% of the screen, not 50% of box 2, so box 2b
flows below box 2a. How do I get box 2a and 2b to have a 50% width of box 2?

Here's my HTML:

<div class="box1">yada yada yada</div>

<div>
<div class="box2a">bla bla bla</div>
<div class="box2b">da de da de da</div>
</div>

Thanks.

Brian wrote:

James Thornton wrote:


Box two does fit, but when I give 2a and 2b each a width of 50%, it
appears that they are 50% of the screen, not 50% of box 2, so box 2b
flows below box 2a. How do I get box 2a and 2b to have a 50% width of
box 2?


Did you set a width on box 1?

Yes -- 150px.

Brian wrote:

James Thornton wrote:

Brian wrote:
time to supply a url to a test case.

http://unifiedmind.com/try/css.html
http://unifiedmind.com/try/james.css