RE: Subject: DIVs and horizontal scroll -- WAS: RE: [WSG] the mysteries of float - i seek enlightenment
Thanks everyone. In the end I used Gunlaug's solution (slightly modified), and
wrapped the calendar table in an extra DIV with a class of horizontalscroll:
.horizontalscroll
{
overflow: auto;
margin: 0 0 0 1em;
width: 95%;
_overflow-y: visible;
padding: 0 1em 1em 0;
}
Seems to work OK in FF 1.0.4, Opera 7.50, Mozilla 1.7.3 and IE 5.01, 5.5 and 6
all under Windows XP. The _overflow-y bit seems to only affect IE, I'll have
to do some reading up about that property.
Thanks again
Chris
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun
Sent: 26 May 2005 17:46
To: wsg@webstandardsgroup.org
Subject: Re: Subject: DIVs and horizontal scroll -- WAS: RE: [WSG] the
mysteries of float - i seek enlightenment
Chris Taylor wrote:
I'm trying to get a very wide table to appear inside a DIV and scroll
horizontally, but not vertically. Take a look at
http://www.egton.net/yearview/index.html to see what I mean. What I
would like is for the calendar table to be horizontally scrollable
inside Tapes due in - Year View DIV. Eventually I'll be adding
additional information inside each days cell, so the DIV needs to be
able to resize vertically, yet not break in IE.
A quick solution - working, but need fine-tuning for your page.
Tested in Opera8, FF1.0 and IE6.
div id=pane2 style=overflow: auto; margin: 0 0 0 10px; float: left;
width: 60%; _overflow-y: visible; _padding-bottom: 1em;
This will auto-adjust no matter how much you put in there (within reason).
Note that your styles for #pane2 is still working. I'm just overriding some of
them. Clean up later... :-)
regards
Georg
--
http://www.gunlaug.no
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] the mysteries of float - i seek enlightenment too
While I was zooming the text-size in FF, I saw that one line of text partly overlaps the red float. http://www.satzansatz.de/cssd/tmp/lineinfloat.html looks like the real browsers have some float bugs too. FFnightly20050525 WinXPSP2. Can this be confirmed on a Mac build? If this is a bug, someone knows the bugzilla entry for this? Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] the mysteries of float - i seek enlightenment too
Interesting, Confirmed on Windows 2000, FFN 20050521. I'll have a play with your example and see if I can't work out the details. On 5/26/05, Ingo Chao [EMAIL PROTECTED] wrote: While I was zooming the text-size in FF, I saw that one line of text partly overlaps the red float. http://www.satzansatz.de/cssd/tmp/lineinfloat.html looks like the real browsers have some float bugs too. FFnightly20050525 WinXPSP2. Can this be confirmed on a Mac build? If this is a bug, someone knows the bugzilla entry for this? Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- Rowan Lewis (AKA. The Wolf) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] the mysteries of float - i seek enlightenment too
Yes, it's there on many older builds too. (Windows 2000, FFN 20050511). Prabhath http://nidahas.com On 5/26/05, Rowan Lewis [EMAIL PROTECTED] wrote: Interesting, Confirmed on Windows 2000, FFN 20050521. I'll have a play with your example and see if I can't work out the details. On 5/26/05, Ingo Chao [EMAIL PROTECTED] wrote: While I was zooming the text-size in FF, I saw that one line of text partly overlaps the red float. http://www.satzansatz.de/cssd/tmp/lineinfloat.html looks like the real browsers have some float bugs too. FFnightly20050525 WinXPSP2. Can this be confirmed on a Mac build? If this is a bug, someone knows the bugzilla entry for this? Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- Rowan Lewis (AKA. The Wolf) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] the mysteries of float - i seek enlightenment too
I think most of the builds from this month are using a build of 'gecko' from the beginning of the month (20050507). This is the same one as the Deer Park Alpha 1. On 5/26/05, Prabhath Sirisena [EMAIL PROTECTED] wrote: Yes, it's there on many older builds too. (Windows 2000, FFN 20050511). Prabhath http://nidahas.com On 5/26/05, Rowan Lewis [EMAIL PROTECTED] wrote: Interesting, Confirmed on Windows 2000, FFN 20050521. I'll have a play with your example and see if I can't work out the details. On 5/26/05, Ingo Chao [EMAIL PROTECTED] wrote: While I was zooming the text-size in FF, I saw that one line of text partly overlaps the red float. http://www.satzansatz.de/cssd/tmp/lineinfloat.html looks like the real browsers have some float bugs too. FFnightly20050525 WinXPSP2. Can this be confirmed on a Mac build? If this is a bug, someone knows the bugzilla entry for this? Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- Rowan Lewis (AKA. The Wolf) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- Rowan Lewis (AKA. The Wolf) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] the mysteries of float - i seek enlightenment
Thanks, Ingo... this is exactly what I needed. Thanks for the clear
description.
For those playing along at home, the details for float rules are at:
http://www.w3.org/TR/REC-CSS2/visuren.html#float-position
scott
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Ingo Chao
Sent: Wednesday, May 25, 2005 4:56 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] the mysteries of float - i seek enlightenment
Scott Reston schrieb:
... If I
wrap the divs in one big div, I still see the same issue.
The thing I'm most interested in, though, is the WHY? I want to
understand the rule that I've run afoul of so that I can avoid it in
the
future.
I'm not getting 'float drop' caused by a too-wide element being forced
down (least I don't think that's the case...) What nature of floats am
I
missing? Shouldn't the floated pull-quote float within its container
and
ignore the sidebar's dimensions?
No.
You might accept that IE don't get floating correct. The situation in IE
is completely different from other browsers, because the #content at the
left has a dimension, a width, so the element gains layout: no float
outside of this layout element can interfere with the content inside
this layout element, and no clear inside this element will interfere
with the floats outside (place a clear: both at pullquote, and you won't
see any effect, compare the result with the other browsers). So, in IE,
the pull-quote floats within its container as if there was no other
float outside of the layout element. If you want to learn how floats are
working, it's a good idea to switch to a compliant browser.
Now, to the real browsers: Note that the left float is at the same level
with the last preceding floating sidebar.
..sidebar { width: 190px; float: right; clear: both; ... }
#content { width: 300px; ...}
.pullquote { width: 150px; float: left; ...}
div class=sidebar.../div //no.1
div class=sidebar.../div //no.2
div id=content
div class=pullquote.../div // sits at the same level as no.2
...
...
/div
This is float Rule 5: A floating element's top may not be higher than
the top of any earlier floating or block level element. This rule, if
respected [1], simply won't let your left floating pullquote flow up.
Once accepted, the next question could be: Ok, but why does the content
starts at top=0, isn't the clear:right in the second sidebar container
preventing this?
No. Clearing does not stop floating. Clear:right, applied to the sidebar
no.2, just don't allow any right floating element to the right side of
this sidebarno.2, nothing else.
Now the sidebar no.2 drops under sidebar no.1. Both have still
float:right, that means, the #content will flow to the left side of
both as high as possible.
The next question could be: why can the text move up, but the preceding
left float pullquote itself does not move up? Why does the pullquote not
stop the content? The answer is that floats are taken out of the normal
page flow, and the text just respects the float:left of the pullquote
and the float:right of the sidebars, and moves up between them.
One solution of your layout problem, as mentioned before, is to unfloat
(!) the sidebars and to wrap them in a right-floated container:
#rightside {float: right; width: 190px; }
.sidebar {background-color: rgb(102, 204, 255); margin-top: 5px; }
div id=rightside
div class=sidebar.../div
div class=sidebar.../div
/div
div id=content
div class=pullquote.../div
...
...
/div
Ingo
[1] Opera7.54, but not Op8, goes for float Rule 8 and places the
pullquote float as high as possible=next to the first right float.
This looks similar to the situation in IE6, but is completely different,
again, try to clear pullquote to see.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] the mysteries of float - i seek enlightenment
Hi, I'm trying to get a very wide table to appear inside a DIV and scroll horizontally, but not vertically. Take a look at http://www.egton.net/yearview/index.html to see what I mean. What I would like is for the calendar table to be horizontally scrollable inside Tapes due in - Year View DIV. Eventually I'll be adding additional information inside each days cell, so the DIV needs to be able to resize vertically, yet not break in IE. I've tried various permutations of max-width/max-height and overflow, but nothing seems to work. If anyone can help I'd be more than grateful. Thanks Chris ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Subject: DIVs and horizontal scroll -- WAS: RE: [WSG] the mysteries of float - i seek enlightenment
Hi, Posted this with an incorrect subject first time, sorry about that. The end of the week looms and my brain is starting to shut down. I'm trying to get a very wide table to appear inside a DIV and scroll horizontally, but not vertically. Take a look at http://www.egton.net/yearview/index.html to see what I mean. What I would like is for the calendar table to be horizontally scrollable inside Tapes due in - Year View DIV. Eventually I'll be adding additional information inside each days cell, so the DIV needs to be able to resize vertically, yet not break in IE. I've tried various permutations of max-width/max-height and overflow, but nothing seems to work. If anyone can help I'd be more than grateful. Thanks Chris ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: Subject: DIVs and horizontal scroll -- WAS: RE: [WSG] the mysteries of float - i seek enlightenment
Have you tried
.databox
{
padding: 0.5em;
overflow: auto;
}
Parker
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: Subject: DIVs and horizontal scroll -- WAS: RE: [WSG] the mysteries of float - i seek enlightenment
Hi Chris,
Here's what you need:
#pane2
{
position:relative;
height:auto; background-color: #FF;
margin: 0 1em 0 1em;
border: 1px solid #404040;
overflow:auto;
}
Hope that is useful!
Roberto
Chris Taylor wrote:
Hi,
Posted this with an incorrect subject first time, sorry about that. The
end of the week looms and my brain is starting to shut down.
I'm trying to get a very wide table to appear inside a DIV and scroll
horizontally, but not vertically. Take a look at
http://www.egton.net/yearview/index.html to see what I mean. What I
would like is for the calendar table to be horizontally scrollable
inside Tapes due in - Year View DIV. Eventually I'll be adding
additional information inside each days cell, so the DIV needs to be
able to resize vertically, yet not break in IE.
I've tried various permutations of max-width/max-height and overflow,
but nothing seems to work. If anyone can help I'd be more than grateful.
Thanks
Chris
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: Subject: DIVs and horizontal scroll -- WAS: RE: [WSG] the mysteries of float - i seek enlightenment
So sorry about the receipt request! Please appologise for the inconvenience. It was my first post here... I've turned it off! Roberto Chris Taylor wrote: Hi, Posted this with an incorrect subject first time, sorry about that. The end of the week looms and my brain is starting to shut down. I'm trying to get a very wide table to appear inside a DIV and scroll horizontally, but not vertically. Take a look at http://www.egton.net/yearview/index.html to see what I mean. What I would like is for the calendar table to be horizontally scrollable inside Tapes due in - Year View DIV. Eventually I'll be adding additional information inside each days cell, so the DIV needs to be able to resize vertically, yet not break in IE. I've tried various permutations of max-width/max-height and overflow, but nothing seems to work. If anyone can help I'd be more than grateful. Thanks Chris ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] the mysteries of float - i seek enlightenment too
Ingo Chao wrote: While I was zooming the text-size in FF, I saw that one line of text partly overlaps the red float. http://www.satzansatz.de/cssd/tmp/lineinfloat.html looks like the real browsers have some float bugs too. FFnightly20050525 WinXPSP2. Can this be confirmed on a Mac build? If this is a bug, someone knows the bugzilla entry for this? What about this one? https://bugzilla.mozilla.org/show_bug.cgi?id=41412 Thierry | http://www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: Subject: DIVs and horizontal scroll -- WAS: RE: [WSG] the mysteries of float - i seek enlightenment
Chris Taylor wrote: I'm trying to get a very wide table to appear inside a DIV and scroll horizontally, but not vertically. Take a look at http://www.egton.net/yearview/index.html to see what I mean. What I would like is for the calendar table to be horizontally scrollable inside Tapes due in - Year View DIV. Eventually I'll be adding additional information inside each days cell, so the DIV needs to be able to resize vertically, yet not break in IE. A quick solution - working, but need fine-tuning for your page. Tested in Opera8, FF1.0 and IE6. div id=pane2 style=overflow: auto; margin: 0 0 0 10px; float: left; width: 60%; _overflow-y: visible; _padding-bottom: 1em; This will auto-adjust no matter how much you put in there (within reason). Note that your styles for #pane2 is still working. I'm just overriding some of them. Clean up later... :-) regards Georg -- http://www.gunlaug.no ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] the mysteries of float - i seek enlightenment
I've created a pared down example to illustrate a problem I'm having with floats. My confusion suggests that I'm missing some basic concept of how floats behave and I'm finding it frustrating... http://www.capstrat.com/development/test-float.html In this example, all code is wrapped with a containing div (yellow background). The two side-bar divs live (code-wise) just before the content div (dark grey backround), just inside the container div and are floated right. The pull-quote (violet background) is the first thing inside of the content div. I'm expecting this to look the way that IE renders it: sidebars to the right, pull-quoute in the upper-left corner of the content div. In Firefox, the pullquote drops within the content to clear the first sidebar. Why? Can someone give me a little guidance on this? Scott Reston Raleigh, NC, USA www.capstrat.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] the mysteries of float - i seek enlightenment
Hi, Scott You have to put your quote before all like : div class=pullquoteppull-quote text/p/div div class=sidebarpsidebar item 1. sidebar item 1. sidebar item 1. /p/div div class=sidebarpsidebar item 2. sidebar item 2. sidebar item 2. /p/div div id=content pUt labore et dolore magna aliqua. Ullamco laboris nisi lorem ipsum dolor sit amet, velit esse cillum dolore. Ut aliquip ex ea commodo consequat./p ... /div /div And give a width for your pullquote div. Cheers! Angela -Message d'origine- De : [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] la part de Scott Reston Envoyé : mercredi 25 mai 2005 16:51 À : wsg@webstandardsgroup.org Objet : [WSG] the mysteries of float - i seek enlightenment I've created a pared down example to illustrate a problem I'm having with floats. My confusion suggests that I'm missing some basic concept of how floats behave and I'm finding it frustrating... http://www.capstrat.com/development/test-float.html In this example, all code is wrapped with a containing div (yellow background). The two side-bar divs live (code-wise) just before the content div (dark grey backround), just inside the container div and are floated right. The pull-quote (violet background) is the first thing inside of the content div. I'm expecting this to look the way that IE renders it: sidebars to the right, pull-quoute in the upper-left corner of the content div. In Firefox, the pullquote drops within the content to clear the first sidebar. Why? Can someone give me a little guidance on this? Scott Reston Raleigh, NC, USA www.capstrat.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] the mysteries of float - i seek enlightenment
Scott, Sorry, I was too rushy. Don't move your quote. Just give it a width and float left your content div. -Message d'origine- De : [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] la part de Scott Reston Envoyé : mercredi 25 mai 2005 16:51 À : wsg@webstandardsgroup.org Objet : [WSG] the mysteries of float - i seek enlightenment I've created a pared down example to illustrate a problem I'm having with floats. My confusion suggests that I'm missing some basic concept of how floats behave and I'm finding it frustrating... http://www.capstrat.com/development/test-float.html In this example, all code is wrapped with a containing div (yellow background). The two side-bar divs live (code-wise) just before the content div (dark grey backround), just inside the container div and are floated right. The pull-quote (violet background) is the first thing inside of the content div. I'm expecting this to look the way that IE renders it: sidebars to the right, pull-quoute in the upper-left corner of the content div. In Firefox, the pullquote drops within the content to clear the first sidebar. Why? Can someone give me a little guidance on this? Scott Reston Raleigh, NC, USA www.capstrat.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] the mysteries of float - i seek enlightenment
Scott Reston wrote: In Firefox, the pullquote drops within the content to clear the first sidebar. Why? Put your 2 sidebar (do not float them anymore) into a container that you float right, and give it a width (pullquote needs a width too). That should do it. Thierry | http://www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] the mysteries of float - i seek enlightenment
Thierry Koblentz wrote: Put your 2 sidebar (do not float them anymore) into a container that you float right, and give it a width (pullquote needs a width too). Of course, I meant the content of your sidebar DIVs not the whole DIVs. So you're adding one DIV but remove 2. Thierry | http://www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] the mysteries of float - i seek enlightenment
On Wed, 25 May 2005 10:51:14 -0400, Scott Reston [EMAIL PROTECTED] wrote: I've created a pared down example to illustrate a problem I'm having with floats. My confusion suggests that I'm missing some basic concept of how floats behave and I'm finding it frustrating... http://www.capstrat.com/development/test-float.html Make #content first in the source order: div id=wrapper div id=content div class=pullquote ppull-quote/p /div pconsequat./p /div div class=sidebar psideba/p /div div class=sidebar psidebar/p /div /div Float #content left, add width to .pullquote, height to #wrapper. Best, David Laakso -- http://www.dlaakso.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] the mysteries of float - i seek enlightenment
I'm no expert, but the following is the best explanation I've come across: http://nemesis1.f2o.org/aarchive?id=11 Hope it helps. Bruce Prochnau BKSesign Solutions - Original Message - From: David Laakso [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Wednesday, May 25, 2005 12:25 PM Subject: Re: [WSG] the mysteries of float - i seek enlightenment On Wed, 25 May 2005 10:51:14 -0400, Scott Reston [EMAIL PROTECTED] wrote: I've created a pared down example to illustrate a problem I'm having with floats. My confusion suggests that I'm missing some basic concept of how floats behave and I'm finding it frustrating... http://www.capstrat.com/development/test-float.html Make #content first in the source order: div id=wrapper div id=content div class=pullquote ppull-quote/p /div pconsequat./p /div div class=sidebar psideba/p /div div class=sidebar psidebar/p /div /div Float #content left, add width to .pullquote, height to #wrapper. Best, David Laakso -- http://www.dlaakso.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] the mysteries of float - i seek enlightenment
I've received a couple of good suggestions... thanks! The easiest fix appears to be (as Ricci suggested) to put the pull-quote first, before all of the other items. That bugs me on a semantics basis, though, since I consider the pull-quote as part of the content... also, it might be impractical based on the CMS-editable 'block' on the page. David's suggestion keeps things together semantically, but once I float my content, it gets removed from the flow, making it outstretch its wrapper div (at least in standards-compliant browsers). I'd like to avoid keeping the sidebar as one big item because of the way my content is organized... the sidebars will likely be separate cross-sells. If I wrap the divs in one big div, I still see the same issue. ** The thing I'm most interested in, though, is the WHY? I want to understand the rule that I've run afoul of so that I can avoid it in the future. ** I'm not getting 'float drop' caused by a too-wide element being forced down (least I don't think that's the case...) What nature of floats am I missing? Shouldn't the floated pull-quote float within its container and ignore the sidebar's dimensions? S:R -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ricci Angela Sent: Wednesday, May 25, 2005 11:13 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] the mysteries of float - i seek enlightenment Hi, Scott You have to put your quote before all like : div class=pullquoteppull-quote text/p/div div class=sidebarpsidebar item 1. sidebar item 1. sidebar item 1. /p/div div class=sidebarpsidebar item 2. sidebar item 2. sidebar item 2. /p/div div id=content pUt labore et dolore magna aliqua. Ullamco laboris nisi lorem ipsum dolor sit amet, velit esse cillum dolore. Ut aliquip ex ea commodo consequat./p ... /div /div ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] the mysteries of float - i seek enlightenment
Scott Reston wrote: sidebars will likely be separate cross-sells. If I wrap the divs in one big div, I still see the same issue. Are you sure? I just tried it and it seems to work just fine. The thing I'm most interested in, though, is the WHY? I want to Did you check the BugZilla database? https://bugzilla.mozilla.org/query.cgi?format=advanced Thierry | http://www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] the mysteries of float - i seek enlightenment
On Wed, 25 May 2005 10:51:14 -0400, Scott Reston [EMAIL PROTECTED] wrote: I've created a pared down example to illustrate a problem I'm having with floats. My confusion suggests that I'm missing some basic concept of how floats behave and I'm finding it frustrating... http://www.capstrat.com/development/test-float.html Scott, Please see if this meets your requirements-- puts content first in source order. Sorry, can't help on theory-- I'm a student at the school of trial and error. I seek enlightenment , too. http://www.dlaakso.com/simple-two-column.html Best, David -- http://www.dlaakso.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] the mysteries of float - i seek enlightenment
Scott Reston schrieb:
... If I
wrap the divs in one big div, I still see the same issue.
The thing I'm most interested in, though, is the WHY? I want to
understand the rule that I've run afoul of so that I can avoid it in the
future.
I'm not getting 'float drop' caused by a too-wide element being forced
down (least I don't think that's the case...) What nature of floats am I
missing? Shouldn't the floated pull-quote float within its container and
ignore the sidebar's dimensions?
No.
You might accept that IE don't get floating correct. The situation in IE
is completely different from other browsers, because the #content at the
left has a dimension, a width, so the element gains layout: no float
outside of this layout element can interfere with the content inside
this layout element, and no clear inside this element will interfere
with the floats outside (place a clear: both at pullquote, and you won't
see any effect, compare the result with the other browsers). So, in IE,
the pull-quote floats within its container as if there was no other
float outside of the layout element. If you want to learn how floats are
working, it's a good idea to switch to a compliant browser.
Now, to the real browsers: Note that the left float is at the same level
with the last preceding floating sidebar.
..sidebar { width: 190px; float: right; clear: both; ... }
#content { width: 300px; ...}
.pullquote { width: 150px; float: left; ...}
div class=sidebar.../div //no.1
div class=sidebar.../div //no.2
div id=content
div class=pullquote.../div // sits at the same level as no.2
...
...
/div
This is float Rule 5: A floating element's top may not be higher than
the top of any earlier floating or block level element. This rule, if
respected [1], simply won't let your left floating pullquote flow up.
Once accepted, the next question could be: Ok, but why does the content
starts at top=0, isn't the clear:right in the second sidebar container
preventing this?
No. Clearing does not stop floating. Clear:right, applied to the sidebar
no.2, just don't allow any right floating element to the right side of
this sidebarno.2, nothing else.
Now the sidebar no.2 drops under sidebar no.1. Both have still
float:right, that means, the #content will flow to the left side of
both as high as possible.
The next question could be: why can the text move up, but the preceding
left float pullquote itself does not move up? Why does the pullquote not
stop the content? The answer is that floats are taken out of the normal
page flow, and the text just respects the float:left of the pullquote
and the float:right of the sidebars, and moves up between them.
One solution of your layout problem, as mentioned before, is to unfloat
(!) the sidebars and to wrap them in a right-floated container:
#rightside {float: right; width: 190px; }
.sidebar {background-color: rgb(102, 204, 255); margin-top: 5px; }
div id=rightside
div class=sidebar.../div
div class=sidebar.../div
/div
div id=content
div class=pullquote.../div
...
...
/div
Ingo
[1] Opera7.54, but not Op8, goes for float Rule 8 and places the
pullquote float as high as possible=next to the first right float.
This looks similar to the situation in IE6, but is completely different,
again, try to clear pullquote to see.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] the mysteries of float - i seek enlightenment
Ingo Chao wrote: This is float Rule 5: A floating element's top may not be higher than the top of any earlier floating or block level element. I knew how to fix the issue, but I was missing the big picture. So thanks for that piece of information Thierry | http://www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
