Stylesheets - Triky Layout with CSS

Author

Triky Layout with CSS

2007-01-27, 11:02 pm

Dear supeior CSS persons, I need some help!

Here is what I have :
[text][select][select][select]

If the user shrinks the window, I would like it to fold in like this:

[text][select][select]
[select]

and if further shrunk

[text][select]
[select]
[select]

Notice that the margin is preserved. Can this be done with CSS? maybe
some cobination of float and margin?
I dont want to use a table if I dont absolutely have to.

Thanks,
-SJ

Ben C

2007-01-27, 11:02 pm

On 2007-01-18, SJ <sjourdan@XXXXXXXXXX> wrote:
> Dear supeior CSS persons, I need some help!
>
> Here is what I have :
> [text][select][select][select]
>
> If the user shrinks the window, I would like it to fold in like this:
>
> [text][select][select]
> [select]
>
> and if further shrunk
>
> [text][select]
> [select]
> [select]
>
> Notice that the margin is preserved. Can this be done with CSS? maybe
> some cobination of float and margin?
> I dont want to use a table if I dont absolutely have to.

If you put a float, with width and height set explicitly on it, in the
content directly after the first [text], you should get the effect you
want in Firefox and I think IE7.

Setting the height of the float is the hard part. Too high and it will
overflow the container and disrupt later inline boxes, too low and some
of the [select]s might find their way back to the left margin.

In Opera and Konqueror, putting the float after the first [text] may
have the result of indenting the first line as well-- not what you want.

This is because Opera and Konqueror align a float with the top of the
current line box where that doesn't break any of the other float rules
(this was discussed recently in this NG).

So you can put the [text] itself in a span, float that left, and give
the other float also clear: left.

Like this:

<span style="float: left">text</span>
<span style="float: left; clear: left; width: 4em; height: 12em">
</span>
<input type="select">
<input type="select">
<input type="select">
<input type="select">
<input type="select">

For the first float we're relying on CSS 2.1 rules for auto width
floats, but that should be OK, I don't know of a browser that still
implements the CSS 2 rules. Possibly older versions of IE do (I'm not
familiar with IE), so you'll have to check that.

2007-01-27, 11:02 pm

Ben, you are brillant. Thank you for the detailes response!!!

-SJ

Ben C wrote:
> On 2007-01-18, SJ <sjourdan@XXXXXXXXXX> wrote:
>
> If you put a float, with width and height set explicitly on it, in the
> content directly after the first [text], you should get the effect you
> want in Firefox and I think IE7.
>
> Setting the height of the float is the hard part. Too high and it will
> overflow the container and disrupt later inline boxes, too low and some
> of the [select]s might find their way back to the left margin.
>
> In Opera and Konqueror, putting the float after the first [text] may
> have the result of indenting the first line as well-- not what you want.
>
> This is because Opera and Konqueror align a float with the top of the
> current line box where that doesn't break any of the other float rules
> (this was discussed recently in this NG).
>
> So you can put the [text] itself in a span, float that left, and give
> the other float also clear: left.
>
> Like this:
>
> <span style="float: left">text</span>
> <span style="float: left; clear: left; width: 4em; height: 12em">
> </span>
> <input type="select">
> <input type="select">
> <input type="select">
> <input type="select">
> <input type="select">
>
> For the first float we're relying on CSS 2.1 rules for auto width
> floats, but that should be OK, I don't know of a browser that still
> implements the CSS 2 rules. Possibly older versions of IE do (I'm not
> familiar with IE), so you'll have to check that.