[css-d] why do floats behave this way?

[Don Hinshaw]

Hi all,
I posted this question earlier this week and go no response, and am 
still confused by this behavior.

My example is here: http://test.hinshawdesign.com/css/float_debug.html

When I make the viewport narrower in IE/PC, the middle column drops down.
In FF/PC the Select menu begins to overlap the right column.

I would have expected the browser to put up a horizontal scrollbar instead.

Question: is this correct behavior? How can I make the center column 
stay put and have the browser scroll when the column contains  
non-wrappable content like a select menu?


Thank you very much for any help...I am at my wits end.

--
Don Hinshaw
Hinshaw Design Group
http://www.hinshawdesign.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why do floats behave this way?

[Gunlaug Sørtun]

Don Hinshaw wrote:

Hi all, I posted this question earlier this week and go no response,
 and am still confused by this behavior. My example is here: 
http://test.hinshawdesign.com/css/float_debug.html


When I make the viewport narrower in IE/PC, the middle column drops 
down. In FF/PC the Select menu begins to overlap the right column.


IE/win will expand  so everything fit inside, so
the whole container will drop as one.
FF (and all the other good browsers) will overflow some, and then drop
all pieces that are too wide (and everything below them) as the window
gets narrower.

I would have expected the browser to put up a horizontal scrollbar 
instead.


Question: is this correct behavior?


Yes, all browsers handle it as expected.


How can I make the center column stay put and have the browser scroll
 when the column contains non-wrappable content like a select menu?


By applying a large enough *min-width* to the entire page. Something
like 'body {min-width: 760px;}' may work well. It is a problem that the
select menu gets wider if font-size is bumped up though.

Of course, IE/win don't understand *min-width*, so you may have to add a
wrapper inside body and create some sort of min-width simulation for
IE/win. Most javascript and/or IE-expressions used will only work if IE6
is in quirks mode, or they won't work in IE5.0+ and IE6 with the same
definition.

regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why do floats behave this way?

[Gabe da Silveira]

On Jun 10, 2005, at 2:25 PM, Gunlaug Sørtun wrote:


Don Hinshaw wrote:


Hi all, I posted this question earlier this week and go no response,
 and am still confused by this behavior. My example is here:  
http://test.hinshawdesign.com/css/float_debug.html
When I make the viewport narrower in IE/PC, the middle column  
drops down. In FF/PC the Select menu begins to overlap the right  
column.




IE/win will expand  so everything fit inside, so
the whole container will drop as one.
FF (and all the other good browsers) will overflow some, and then drop
all pieces that are too wide (and everything below them) as the window
gets narrower.


I would have expected the browser to put up a horizontal scrollbar  
instead.

Question: is this correct behavior?



Yes, all browsers handle it as expected.



How can I make the center column stay put and have the browser scroll
 when the column contains non-wrappable content like a select menu?



By applying a large enough *min-width* to the entire page. Something
like 'body {min-width: 760px;}' may work well. It is a problem that  
the

select menu gets wider if font-size is bumped up though.

Of course, IE/win don't understand *min-width*, so you may have to  
add a

wrapper inside body and create some sort of min-width simulation for
IE/win. Most javascript and/or IE-expressions used will only work  
if IE6

is in quirks mode, or they won't work in IE5.0+ and IE6 with the same
definition.


This solution is the best I can think of as well.  It's obviously not  
ideal because it doesn't stretch according to content.  Unfortunately  
this is the one feature of table rendering that is not present in CSS  
at all:


The ability to set a width to the minimum required to hold its  
contents.  Partially this is because the algorithm for rendering  
tables is fuzzy in a lot of areas... how wide should each column be  
under various circumstances?  Should it expand to 100% width for all  
paragraphs, or only if there's a single element that extends farther?  
if the latter, than what's a reasonable with to start breaking lines?


All in all though, I think it's a weakness in the CSS 
spec.__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why do floats behave this way? - followup

[Don Hinshaw]

Gunlaug Sørtun wrote:


By applying a large enough *min-width* to the entire page. Something
like 'body {min-width: 760px;}' may work well. It is a problem that the
select menu gets wider if font-size is bumped up though.

Of course, IE/win don't understand *min-width*, so you may have to add a
wrapper inside body and create some sort of min-width simulation for
IE/win. Most javascript and/or IE-expressions used will only work if IE6
is in quirks mode, or they won't work in IE5.0+ and IE6 with the same
definition.



Hello Georg and others who offered help,
I see what you mean and it works beautifully in FF/PC, but I'll be 
danged if I can get it to work in IE/PC 
(http://test.hinshawdesign.com/css/float_debug.html).

I have two questions related to that:
1/ Can you elaborate by what you mean when you say "create some sort of 
min-width simulation for

IE/win"?
2/ Would it be a horrible mistake to use absolute positioning for these 
three content areas? I realize it would fix the width of the page which 
comes with its own problems. I have implemented it here: 
http://test.hinshawdesign.com/css/float_debug_ap.html


Thanks again,
Don

--
Don Hinshaw
Hinshaw Design Group
http://www.hinshawdesign.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why do floats behave this way? - followup

[Gunlaug Sørtun]

Don Hinshaw wrote:
I see what you mean and it works beautifully in FF/PC, but I'll be 
danged if I can get it to work in IE/PC 
(http://test.hinshawdesign.com/css/float_debug.html). I have two 
questions related to that: 1/ Can you elaborate by what you mean when

 you say "create some sort of min-width simulation for IE/win"?


Have a read here: 
...where I describe the use of IE-expressions for max/min-width
simulation. Should give you an idea.

2/ Would it be a horrible mistake to use absolute positioning for 
these three content areas? I realize it would fix the width of the 
page which comes with its own problems. I have implemented it here: 
http://test.hinshawdesign.com/css/float_debug_ap.html


Absolute positioned elements won't fall down, but I won't recommend it
as a solution for large areas on a page. Depends on what's in the page,
of course, but AP doesn't give much play-room.

You can use percentages in an absolute positioned layout, which will
give you a fluid page-width. Still not the best solution though.
---

BTW: the use of EM for font-size on body makes the 'extreme font-step
bug' pop up in IE/win. Using percentage for font-size on body will kill
that bug, no matter how you define font-size further into the page.

regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why do floats behave this way? - followup

[David Laakso]

On Sat, 11 Jun 2005 17:29:25 -0400, Don Hinshaw  
<[EMAIL PROTECTED]> wrote:



Hello Georg and others who offered help,
I see what you mean and it works beautifully in FF/PC, but I'll be  
danged if I can get it to work in IE/PC  
(http://test.hinshawdesign.com/css/float_debug.html).

I have two questions related to that:
1/ Can you elaborate by what you mean when you say "create some sort of  
min-width simulation for

IE/win"?
Sort of like this but  
change the min-width to 760px in the CSS. And recalculate the ie min-width  
of the 'expressions' within the conditional comments to 760px.
Delete the header and footer. Plug your stuff in. And see what you think.  
It may hang on the submit thing (or whatever that thing is called). But  
worth a try...?

Same principle for min-max should work with your layout as well.
2/ Would it be a horrible mistake to use absolute positioning for these  
three content areas? I realize it would fix the width of the page which  
comes with its own problems. I have implemented it here:  
http://test.hinshawdesign.com/css/float_debug_ap.html

Yes

Thanks again,
Don

Regards,
David Laakso

--
http://www.dlaakso.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why do floats behave this way? - followup

[Don Hinshaw]

David Laakso wrote:

Sort of like this but  
change the min-width to 760px in the CSS. And recalculate the ie 
min-width  of the 'expressions' within the conditional comments to 760px.
Delete the header and footer. Plug your stuff in. And see what you 
think.  It may hang on the submit thing (or whatever that thing is 
called). But  worth a try...?

Same principle for min-max should work with your layout as well.
Regards,
David Laakso

Thanks Georg and David...I am going to read up on IE expressions and see 
if I can get over this hump. I really appreciate the input and I will be 
back to let you know how it turns out.


Don

--
Don Hinshaw
Hinshaw Design Group
http://www.hinshawdesign.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/