By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,624 Members | 2,179 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,624 IT Pros & Developers. It's quick & easy.

Triky Layout with CSS

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a
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

P: n/a
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.