Stylesheets - Dynamic box layout question

Author

Dynamic box layout question

WeshaTheLeopard@gmail.com

2005-09-20, 7:40 pm

Hi all,

I have to admit that I'm completely at loss trying to implement the
following layout:

+-----------document---------+
| |
| +--box1---+ +--box2---+ |
| | A | | A | |
| |<-- | | |<-- | | |
| | | | | |
| | | +---------+ |
| | | +--box3-+ |
| | | | A | |
| | | |<-- | | |
| | | | | |
| | | +-------+ |
| | | |
| | | |
| +---------+ |
| |
+----------------------------+

The idea is that box1 clings to the left edge of the document window,
box2 clings to the right edge of the box1 and aligns with its top edge,
and box3 clings to the right edge of box1 and bottom edge of the box2.
The catch is that the size of each box is unknown beforehand, and thus
the layout must be dynamic.

The code needs to work in Mozilla/Firefox, therefore no need to pay
attention to IE's qurks.

My idea was to put box1 into DIV1 and box2 and box3 into DIV2 and give
them DISPLAY:INLINE so they can cling left-to-right -- but obviously I
misunderstand something in the box model. Floating them to the left
didn't help much either.

Any hints and ideas appreciated.

--Wesha.

Els

2005-09-20, 7:40 pm

WeshaTheLeopard@XXXXXXXXXX wrote:

> Hi all,
>
> I have to admit that I'm completely at loss trying to implement the
> following layout:
>
> +-----------document---------+
>| |
>| +--box1---+ +--box2---+ |
>|| A | | A | |
>||<-- | | |<-- | | |
>|| | | | |
>|| | +---------+ |
>|| | +--box3-+ |
>|| | | A | |
>|| | |<-- | | |
>|| | | | |
>|| | +-------+ |
>|| | |
>|| | |
>| +---------+ |
>| |
> +----------------------------+
>
> The idea is that box1 clings to the left edge of the document window,
> box2 clings to the right edge of the box1 and aligns with its top edge,
> and box3 clings to the right edge of box1 and bottom edge of the box2.
> The catch is that the size of each box is unknown beforehand, and thus
> the layout must be dynamic.
>
> The code needs to work in Mozilla/Firefox, therefore no need to pay
> attention to IE's qurks.
>
> My idea was to put box1 into DIV1 and box2 and box3 into DIV2 and give
> them DISPLAY:INLINE so they can cling left-to-right -- but obviously I
> misunderstand something in the box model. Floating them to the left
> didn't help much either.
>
> Any hints and ideas appreciated.

Instead of display:inline, give them float:left.
The result though, is that if there's a line of text in DIV1 that's
longer than the required width, the width will just extend, unless you
set a specific width. The same goes for DIV2.
If the boxes are fixed widths, there is no problem. Otherwise I would
give both DIV1 and DIV2 a width (50%?), or, alternatively, give DIV1 a
width, and give DIV2 margin-left:[width of DIV1]; instead of
float:left.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Yes - Going For The One

Spartanicus

2005-09-20, 7:40 pm

WeshaTheLeopard@XXXXXXXXXX wrote:

>The idea is that box1 clings to the left edge of the document window,
>box2 clings to the right edge of the box1 and aligns with its top edge,
>and box3 clings to the right edge of box1 and bottom edge of the box2.
>The catch is that the size of each box is unknown beforehand, and thus
>the layout must be dynamic.

That ain't going to work. If the content is allowed to expand the width
of the containers then for example text will expand them to occupy the
full width of the viewport.

You'd need to restrict the width in some form to get this to work.

--
Spartanicus

WeshaTheLeopard@gmail.com

2005-09-20, 7:40 pm

> That ain't going to work. If the content is allowed to expand the width
> of the containers then for example text will expand them to occupy
> the full width of the viewport.

*sigh* I'm trying real hard to convert to "CSS only", but it seems that
these
things are sooooooo much easier to accomplish with tables.... :(

OK, I managed to make the boxes float as I wanted (thanks god, their
content *is* limited in width, but nevertheless I would be happy to
learn what to do if it wasn't) -- now the question is, how do I
horizontially center the whole assembly on the page?

+-------------document------------+
| |
| +-------container-------+ |
| |+--box1---+ +--box2---+| |
| || A | | A || |
| ||<-- | | |<-- | || |
| || | | || |
| || | +---------+| |
| -->|| | +--box3-+ |<-- |
| || | | A | | |
| || | |<-- | | | |
| || | | | | |
| || | +-------+ | |
| || | | |
| || | | |
| |+---------+ | |
| +-----------------------+ |
| |
| |
| |
+-------------document------------+

Spartanicus

2005-09-20, 7:40 pm

WeshaTheLeopard@XXXXXXXXXX wrote:

>*sigh* I'm trying real hard to convert to "CSS only", but it seems that
>these
>things are sooooooo much easier to accomplish with tables.... :(

Not really, IEs poor support for CSS is the problem.

>OK, I managed to make the boxes float as I wanted (thanks god, their
>content *is* limited in width, but nevertheless I would be happy to
>learn what to do if it wasn't)

If the width isn't restricted then it cannot work, table layout or
otherwise.

> -- now the question is, how do I
>horizontially center the whole assembly on the page?

..container{width:30em;margin-right:auto;margin-left:auto}

--
Spartanicus

WeshaTheLeopard@gmail.com

2005-09-20, 7:40 pm

> If the width isn't restricted then it cannot work, table layout or
otherwise.

Huh? Tables, with their "rubber" ability, will either cause the text
inside to wrap, or will just stretch, but box1 will *always* be to the
left of box2 and box3, which cannot be guaranteed by 'float'... Can it?

> .container{
> width:30em;
> margin-right:auto;margin-left:auto}

That's cheating -- static values (such as 30em) may not be used as
content width is unknown beforehand. Besides, if you add border, you
will see that container turns out to be empty because floats escape the
flow...

I can set container to position:absolute, and then it properly engulfs
div1 and div2, but in that case I can't center it...

Is there any other way to place DIVs side by side beside float'ing
them?

I'm trying real hard to understand CSS layout model, but it's just way
too counterintuitive... :(((

Spartanicus

2005-09-20, 7:40 pm

WeshaTheLeopard@XXXXXXXXXX wrote:

>
>Huh? Tables, with their "rubber" ability, will either cause the text
>inside to wrap, or will just stretch, but box1 will *always* be to the
>left of box2 and box3

Right you are, although it's not due to their shrink fit model.

>, which cannot be guaranteed by 'float'... Can it?

Nope, floats are not really suitable for creating layouts, they are
sometimes used to get around IEs poor CSS support. Floats used for
layout are a major source of frustration for budding CSS'ers because of
the issues that result from what is inappropriate usage.

>
>That's cheating -- static values (such as 30em) may not be used as
>content width is unknown beforehand.

You claimed that it wasn't: "thanks god, their content *is* limited in
width".

>Besides, if you add border, you
>will see that container turns out to be empty because floats escape the
>flow...

The container height collapses because floats are not part of the flow,
but this is irrelevant for horizontal centering.

>I can set container to position:absolute, and then it properly engulfs
>div1 and div2, but in that case I can't center it...
>
>Is there any other way to place DIVs side by side beside float'ing
>them?

inline-block (browser support is poor), CSS tables (not supported by
IE), and absolute positioning.

>I'm trying real hard to understand CSS layout model, but it's just way
>too counterintuitive... :(((

It should be much easier than it is, as it stands using CSS for layouts
takes skill, practice and patience. It would be much easier if IE had
supported CSS 2 properly, but it doesn't. Point your arrows towards
Redmond.

--
Spartanicus

WeshaTheLeopard@gmail.com

2005-09-20, 7:40 pm

>That's cheating -- static values (such as 30em) may not be used as
>content width is unknown beforehand.

> You claimed that it wasn't: "thanks god, their content *is* limited in width".

I said *limited*, not *known*... Limited means you know it won't be
*greater* than some value -- but they can be *smaller*, and they still
need to center properly when that happens.

Let me re-iterate the givens...

Box2 contains an image 1 to 300px wide (but we don't know the exact
value);
Box3 contains an image 1 to 300px wide. (but we don't know the exact
value);
Box1 contains an image 1 to 300px wide (but we don't know the exact
value) and guaranteed taller than Box2 and Box3's images combined;

Box2 must be top-aligned to Box1 and left-clinging to it.
Box3 must be top-clinging to Box2 and left-clinging to Box1.

Container must engulf all 3 boxes and horizontially center on the page.

AND! *I do not care about IE!* Need it to work in Moz/FF only!!!

In other words, want to recreate the following piece using pure CSS:

<center>
<table>
<tr height="1">
<td valign="top" width="1" rowspan="2"><img src="1.gif"></td>
<td valign="top" width="1"><img src="2.gif"></td>
</tr>
<tr>
<td valign="top" width="1"><img src="3.gif"></td>
</tr>
</table>
</center>

Spartanicus

2005-09-20, 7:40 pm

WeshaTheLeopard@XXXXXXXXXX wrote:

>AND! *I do not care about IE!* Need it to work in Moz/FF only!!!

Settle down please.

>In other words, want to recreate the following piece using pure CSS:
>
><center>
> <table>
> <tr height="1">
> <td valign="top" width="1" rowspan="2"><img src="1.gif"></td>
> <td valign="top" width="1"><img src="2.gif"></td>
> </tr>
> <tr>
> <td valign="top" width="1"><img src="3.gif"></td>
> </tr>
> </table>
></center>

That doesn't look like the ascii drawing you posted. Based on the ascii
drawing:

HTML table layout: http://homepage.ntlworld.com/spartanicus/temp.htm
DIV layout: http://homepage.ntlworld.com/spartanicus/temp2.htm

--
Spartanicus

WeshaTheLeopard@gmail.com

2005-09-20, 7:40 pm

> >AND! *I do not care about IE!* Need it to work in Moz/FF only!!!
> Settle down please.

Well, I specificly mentioned that in the very first message of my
thread, and nevertheless you kept bashing MSIE, to the point where it
was counterproductive, so I decided to remind you that I don't care
abot IE altogether...

> That doesn't look like the ascii drawing you posted.

Hmmm... You scared me for a moment -- I thought I've got a case of HTML
dislexy. But then I pasted my code above in the browser, and indeed it
works exactly as my ASCII drawing describes it... Anyway.

> Based on the ascii drawing:

Hmmm, interesting. So basicly those are just tables in CSS disguise.
Very interesting, guess I should stick to that. Thanks for your help!