Block positioning / layout question

[James Thornton]

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]

Re: Block positioning / layout question

James Thornton wrote:[color=blue]
> 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.[/color]

e.g., body? then set no width on body (good advice in any case)
[color=blue]
> Box 1:
> - variable width (varies by line length)
> - nowrap[/color]

The em (and ex) unit is a unit based on font-size. I think this is
what you want. The larger the font, the larger the box will be. But
since your test page has no content, and you provided no other
details, I can't say for sure.

div.box1 {
width: 12em ;
/* you need to find a width that will accomodate your size */
float: left ;
/* float in css is similar to float attribute for images */
/* in html 3.2 */
}
[color=blue]
> Box 2:
> - 100% of remaining width[/color]

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.
[color=blue]
> Box 2a;
> - 50% of box 2[/color]

div.box2a {
width: 50% ;
float: left ;
}
[color=blue]
> Box 2b:
> - 50% of box 2[/color]

Box 2b will take the remaining width, and float to the right of box
2a, assuming it will fit there. If not, it will flow below box 2a.

Floats can be dicey affairs. Floated boxes are taken out of the
normal document flow, and unanticipated effects sometimes show up. I
suggest that you accept that some browsers cannot present the layout
exactly as you want, and let them display it in a manner more
appropriate for them.
[color=blue]
> (understanding the concepts behind this layout will help me
> considerably in grokking CSS positioning):[/color]

I cannot explain the css box model in a single post. Have you tried
an online tutorial?

http://css.nu/pointers/index.html#Tutorials

--
Brian
follow the directions in my address to email me

[James Thornton]

Re: Block positioning / layout question

Brian wrote:[color=blue]
> James Thornton wrote:
>[color=green]
>> 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[/color]
>
> 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.[/color]

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">ya da yada yada</div>

<div>
<div class="box2a">b la bla bla</div>
<div class="box2b">d a de da de da</div>
</div>

Thanks.

[Brian]

Re: Block positioning / layout question

James Thornton wrote:[color=blue]
>
> 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?[/color]

Did you set a width on box 1?

--
Brian
follow the directions in my address to email me

[James Thornton]

Re: Block positioning / layout question

Brian wrote:[color=blue]
> James Thornton wrote:
>[color=green]
>>
>> 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?[/color]
>
>
> Did you set a width on box 1?[/color]

Yes -- 150px.

[Brian]

Re: Block positioning / layout question

James Thornton wrote:[color=blue]
> Brian wrote:
>[color=green]
>>Did you set a width on box 1?[/color]
>
> Yes -- 150px.[/color]

time to supply a url to a test case.

--
Brian
follow the directions in my address to email me

[James Thornton]

Re: Block positioning / layout question

Brian wrote:
[color=blue]
> James Thornton wrote:
>[color=green]
>> Brian wrote:[/color]
> time to supply a url to a test case.[/color]

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

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

[Brian]

Re: Block positioning / layout question

James Thornton wrote:[color=blue]
>
> http://unifiedmind.com/try/css.html
> http://unifiedmind.com/try/james.css[/color]

I read the spec on how to compute width, but I can't say I'm
absolutely sure of my understanding. However, on looking at your test
page, it appears that div 2a and div2b have 49% of the width of the
containing block, the body element, not the width of body - 150px.
Perhaps this is as it should be, since floated elements are treated
specially.

http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-float

The diagrams on that page seem to confirm that.

Ultimately, you might want to look at 3 column layouts.

http://glish.com/css/7.asp

NB: the glish page makes a mistake in setting widths of
text-containing blocks in pixels. (Resize the text to something
larger, and watch it fall apart.) Your test site makes the same
mistake. Don't do that on any live site.

--
Brian
follow the directions in my address to email me