473,320 Members | 1,876 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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 2107
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

82
by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | ...
39
by: Zak McGregor | last post by:
Hi all Are there any good solutions to aligning form field names and input boxes without resorting to tables? I am struggling to do this nicely at the moment. Thanks Ciao Zak
47
by: Neal | last post by:
Patrick Griffiths weighs in on the CSS vs table layout debate in his blog entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A quite good article.
20
by: Tammy | last post by:
What would be a good alternative to using frames? I need something that will section my webpage into two halves and can change both frames on a single click. Thanks in Advance, Tammy
10
by: Volker Lenhardt | last post by:
For a QApplication (PyQt) on the small screen of my Zaurus 5500 PDA I try to layout my data output in a QScrollView as the central widget. I'd prefer to use QGridLayout, but cannot add it to the...
10
by: Luke | last post by:
Hi. I am trying to make correct layout, here is an example of (dynamically generated content via jsp): http://localhost/www/layout.htm Most outer div is positioned absolute (if not then it...
3
by: Samuel Shulman | last post by:
I am looking for good guidance for positioning controls on the form.document, it is absolute nightmare and I don't know where to begin Thank you, Samuel Shulman
5
by: Jeff User | last post by:
Hi all I am writing program/framework to server a web site dynamically based on stored web page data with C#, .net1.1 What is the preferred means of controlling page layout, frames or...
5
by: Ed Sproull [MSFT] | last post by:
First I'm pretty new to ASP.NET and I'm having a simple problem. I have small website with a header, sidebar and the the content. I want my content to appear beside my sidebar which seems to be a...
53
by: brave1979 | last post by:
Please check out my javascript library that allows you to create any layout for your web page, nested as deep as you like, adjusting to width and height of a browser window. You just describe it in...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.