469,963 Members | 1,956 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,963 developers. It's quick & easy.

Triky Layout with CSS

SJ
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

Jan 18 '07 #1
2 2043
On 2007-01-18, SJ <sj******@gmail.comwrote:
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.
Jan 18 '07 #2
SJ
Ben, you are brillant. Thank you for the detailes response!!!

-SJ

Ben C wrote:
On 2007-01-18, SJ <sj******@gmail.comwrote:
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.
Jan 18 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

39 posts views Thread by Zak McGregor | last post: by
47 posts views Thread by Neal | last post: by
20 posts views Thread by Tammy | last post: by
10 posts views Thread by Volker Lenhardt | last post: by
3 posts views Thread by Samuel Shulman | last post: by
5 posts views Thread by Jeff User | last post: by
5 posts views Thread by Ed Sproull [MSFT] | last post: by
1 post views Thread by rainxy | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.