Re: [css-d] CSS Float clear question

[Zoe M. Gillenwater]

Gunlaug Sørtun wrote:
> Mark Wheeler wrote:
>> Second, Gunlaug - That did the trick. I'm still fairly new at css, 
>> trial and error and all that. I never would have thought about using 
>> the overflow attribute to contain the div. I skimmed through the 
>> w3.org info and didn't fully understand it. I need to read it some 
>> more I guess. But in a nut shell (If that's possible) why doe the 
>> overflow: hidden make the float work as I wanted it to?
>> 
>
> Well, the answer is in the text: "... establish new block formatting
> context".
> 
> That means (among other things) "complete separation" or "isolation"
> from its surroundings, while the container itself behaves in the
> page-layout as the styling says.
>   

If you want a more simplified explanation, Mark and Michael, I wrote a 
free article on block formatting context article recently:
http://www.communitymx.com/abstract.cfm?cid=6BC9D

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Float clear question

[Mark Wheeler]

Thank you so much for the explanation. I understand, now.

Mark

---

On Aug 8, 2006, at 3:27 PM, Gunlaug Sørtun wrote:

Ok, two in one since it is the same case.

Mark Wheeler wrote:
> First off, thank you to Michael for putting my script up on a site.  
> Sorry about that. I forgot that's the way to go. It's been a while  
> since I've been here.
> Second, Gunlaug - That did the trick. I'm still fairly new at css,  
> trial and error and all that. I never would have thought about  
> using the overflow attribute to contain the div. I skimmed through  
> the w3.org info and didn't fully understand it. I need to read it  
> some more I guess. But in a nut shell (If that's possible) why doe  
> the overflow: hidden make the float work as I wanted it to?

Well, the answer is in the text: "... establish new block formatting
context".

That means (among other things) "complete separation" or "isolation"
from its surroundings, while the container itself behaves in the
page-layout as the styling says.

The one I used: 'overflow: hidden;' does just that and nothing else,
which makes it practical in some cases but definitely not in others.

Example: I can't use 'overflow: hidden;' all that often because it would
cut off my many "over the edge" elements like titles and such.
See on:  how that
will turn out.
This example:  use
'display: table/table-cell', but there are some differences between
browsers for that one too.

I use 'float:left/right' whenever I can (or have to), as floats work
quite well across browser-land - even in IE/win. Of course: not
everything can be floated, so the other alternatives are good to have.

Michael Geary wrote:
> So I understand why the "overflow: hidden;" fixed it, but could you  
> explain what the IE-specific "zoom: 1;" is for? I tried leaving it  
> out and IE still looked OK. I put it back in "just in case" but would
>  like to understand what its purpose is. Thanks!

The proprietary 'zoom: 1;' acts as a 'hasLayout' trigger in IE5.5+. It
does (of course) not validate, but it is one of the few triggers that
isn't likely to give negative side-effects - almost regardless of layout
it is used on.

>> 'Not quite the same standard', for IE/win only: > www.satzansatz.de/cssd/onhavinglayout.html> The choice of hack (or  
>> not) depends on entire layout in each case.
> Yes, I've studied that page too - it's a great piece of research.
> In this particular case, my page looked OK in IE but was bad in  
> Firefox, so an IE hack wouldn't have helped - but the overflow trick
>  was just the ticket.

If there's already a 'hasLayout' trigger in place - like 'width' or
'height', then 'zoom: 1;' won't have any additional effect. In such
cases 'zoom: 1;' should not be used.

Note that 'zoom: (any values other than 1 or 100%);' will make IE/win
zoom that container, somewhat like Opera does but Microsoft has taken
an entirely different approach. Thus, be careful with the value :-)

regards
Georg
-- 
http://www.gunlaug.no

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Float clear question

[Gunlaug Sørtun]

Ok, two in one since it is the same case.

Mark Wheeler wrote:
> First off, thank you to Michael for putting my script up on a site. 
> Sorry about that. I forgot that's the way to go. It's been a while 
> since I've been here.
> 
> Second, Gunlaug - That did the trick. I'm still fairly new at css, 
> trial and error and all that. I never would have thought about using 
> the overflow attribute to contain the div. I skimmed through the 
> w3.org info and didn't fully understand it. I need to read it some 
> more I guess. But in a nut shell (If that's possible) why doe the 
> overflow: hidden make the float work as I wanted it to?

Well, the answer is in the text: "... establish new block formatting
context".

That means (among other things) "complete separation" or "isolation"
from its surroundings, while the container itself behaves in the
page-layout as the styling says.

The one I used: 'overflow: hidden;' does just that and nothing else,
which makes it practical in some cases but definitely not in others.

Example: I can't use 'overflow: hidden;' all that often because it would
cut off my many "over the edge" elements like titles and such.
See on:  how that
will turn out.
This example:  use
'display: table/table-cell', but there are some differences between
browsers for that one too.

I use 'float:left/right' whenever I can (or have to), as floats work
quite well across browser-land - even in IE/win. Of course: not
everything can be floated, so the other alternatives are good to have.

Michael Geary wrote:
> So I understand why the "overflow: hidden;" fixed it, but could you 
> explain what the IE-specific "zoom: 1;" is for? I tried leaving it 
> out and IE still looked OK. I put it back in "just in case" but would
>  like to understand what its purpose is. Thanks!

The proprietary 'zoom: 1;' acts as a 'hasLayout' trigger in IE5.5+. It
does (of course) not validate, but it is one of the few triggers that
isn't likely to give negative side-effects - almost regardless of layout
it is used on.

>> 'Not quite the same standard', for IE/win only: 
>>  The choice of 
>> hack (or not) depends on entire layout in each case.
> 
> 
> Yes, I've studied that page too - it's a great piece of research.
> 
> In this particular case, my page looked OK in IE but was bad in 
> Firefox, so an IE hack wouldn't have helped - but the overflow trick
>  was just the ticket.

If there's already a 'hasLayout' trigger in place - like 'width' or
'height', then 'zoom: 1;' won't have any additional effect. In such
cases 'zoom: 1;' should not be used.

Note that 'zoom: (any values other than 1 or 100%);' will make IE/win
zoom that container, somewhat like Opera does but Microsoft has taken
an entirely different approach. Thus, be careful with the value :-)

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

Re: [css-d] CSS Float clear question

[Michael Geary]

> > From: Mark Wheeler and Michael Geary
> >
> > [Float clearing problems on these pages causing elements
> > to be pushed down on the page:]
> > http://mg.to/test/float.html
> > http://blog.zvents.com/

> From: Gunlaug Sørtun
> 
> Solution (one of many) is to isolate the container: keep the 
> clear from acting on elements outside the container.
> 
>  SOME TEXT GOES HERE...

Bingo! Thank you very much, Gunlaug.

For the event list widget on http://blog.zvents.com/ I added the "overflow:
hidden; zoom: 1;" to a div that already wrapped each event, and it took care
of the problem perfectly.

(For anyone who didn't see the page when it was broken, in the event list on
the right, the first event extended all the way to the bottom of the main
content section, pushing any other events in the list below that.)

Mark, let us know if this trick works for your page as well.

> Containing and isolating floats will also isolate any 
> 'clear'. Thus, the relevant information is found here:
> 
> 'Block formatting contexts' in all standard compliant browsers:
> 
> The choice of style (float/CSS-table/overflow) to achieve the 
> right effect, depends on entire layout in each case.

Thanks, that's very informative. I'd read that section before but didn't
connect it in my mind to this problem. Reading it again now makes things a
lot more clear.

So I understand why the "overflow: hidden;" fixed it, but could you explain
what the IE-specific "zoom: 1;" is for? I tried leaving it out and IE still
looked OK. I put it back in "just in case" but would like to understand what
its purpose is. Thanks!

> 'Not quite the same standard', for IE/win only:
> 
> The choice of hack (or not) depends on entire layout in each case.

Yes, I've studied that page too - it's a great piece of research.

In this particular case, my page looked OK in IE but was bad in Firefox, so
an IE hack wouldn't have helped - but the overflow trick was just the
ticket.

Thanks again,

-Mike

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Float clear question

[Mark Wheeler]

First off, thank you to Michael for putting my script up on a site.  
Sorry about that. I forgot that's the way to go. It's been a while  
since I've been here.

Second, Gunlaug - That did the trick. I'm still fairly new at css,  
trial and error and all that. I never would have thought about using  
the overflow attribute to contain the div. I skimmed through the  
w3.org info and didn't fully understand it. I need to read it some  
more I guess. But in a nut shell (If that's possible) why doe the  
overflow: hidden make the float work as I wanted it to?

Thanks,

Mark

--

On Aug 8, 2006, at 11:37 AM, Gunlaug Sørtun wrote:

Michael Geary wrote:
>> From: Mark Wheeler
>>
>> I have a little problem I can't seem to figure out.

> http://mg.to/test/float.html
>
> When I load the page in IE, the "MORE TEXT GOES HERE" is below the
> red box, just like in Firefox.

Solution (one of many) is to isolate the container: keep the clear from
acting on elements outside the container.


SOME TEXT GOES HERE...

...and so on. Se below for references.

> I ran into what looks like the same problem this morning. On the
> right side of this page is a calendar widget and event list:
>
> http://blog.zvents.com/

Similar problem, and similar solution.

> http://www.zvents.com/widgets/calendar/2/zvents-calendar-fancy.html

Similar problem, and similar solution.

> Is there a reference that anyone can recommend that would help
> explain this kind of problem?

Containing and isolating floats will also isolate any 'clear'. Thus, the
relevant information is found here:

'Block formatting contexts' in all standard compliant browsers:

The choice of style (float/CSS-table/overflow) to achieve the right
effect, depends on entire layout in each case.


'Not quite the same standard', for IE/win only:

The choice of hack (or not) depends on entire layout in each case.

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

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Float clear question

[Gunlaug Sørtun]

Michael Geary wrote:
>> From: Mark Wheeler
>> 
>> I have a little problem I can't seem to figure out.

> http://mg.to/test/float.html
> 
> When I load the page in IE, the "MORE TEXT GOES HERE" is below the 
> red box, just like in Firefox.

Solution (one of many) is to isolate the container: keep the clear from
acting on elements outside the container.


SOME TEXT GOES HERE...

...and so on. Se below for references.

> I ran into what looks like the same problem this morning. On the 
> right side of this page is a calendar widget and event list:
> 
> http://blog.zvents.com/

Similar problem, and similar solution.

> http://www.zvents.com/widgets/calendar/2/zvents-calendar-fancy.html

Similar problem, and similar solution.

> Is there a reference that anyone can recommend that would help 
> explain this kind of problem?

Containing and isolating floats will also isolate any 'clear'. Thus, the
relevant information is found here:

'Block formatting contexts' in all standard compliant browsers:

The choice of style (float/CSS-table/overflow) to achieve the right
effect, depends on entire layout in each case.


'Not quite the same standard', for IE/win only:

The choice of hack (or not) depends on entire layout in each case.

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

Re: [css-d] CSS Float clear question

[Michael Geary]

> From: Mark Wheeler
> 
> I have a little problem I can't seem to figure out. Below is 
> a sample code of some floated divs. It all is as I would like 
> it, except the div that contains "MORE TEXT GOESE HERE...". I 
> want that to clear the previously floated divs that contain 
> dates and prices, not the red bordered div. This way, the div 
> containing "MORE TEXT GOES HERE..."  
> will end up  underneath the previous four floated divs. I put 
> that section in a div by itself, thinking that clearing the 
> final float would only clear within the containing div, but 
> it's not doing that.  
> It seems to work fine in IE/Win, but not in Firefox or 
> Safari. Any help would be appreciated. Here's the sample code.
> 
> ...

Before anybody says "You'll get more replies if you post a URL," I did that
for you:

http://mg.to/test/float.html

When I load the page in IE, the "MORE TEXT GOES HERE" is below the red box,
just like in Firefox.

I ran into what looks like the same problem this morning. On the right side
of this page is a calendar widget and event list:

http://blog.zvents.com/

The event list contains two events, and in Firefox the second event is way
down by the bottom of the page. This is caused by the ".ZventsEventSeparator
{ clear: both; }" rule in zvents.calendar.css - if I take that out the event
list displays as expected. It's also OK if I change it to clear:right. It
looks fine in IE with or without the clear.

I added that clear to deal with floated images in this version of the event
list:

http://www.zvents.com/widgets/calendar/2/zvents-calendar-fancy.html

Without the clear, the images don't line up. clear:right works here as well,
but I did the clear:both because people using this widget might float the
images left instead of right.

I guess I am fairly confused about floats and clears, and especially how I
can use them in an embeddable widget without interfering with (or being
affected by) other layout on the page.

Is there a reference that anyone can recommend that would help explain this
kind of problem?

Many thanks,

-Mike

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/