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
