CSS Flow and DHTML

Concerning the flowing of floating elements and DHTML

[ervante]

I'm working on a treeview interface wherein there are several tables (trees) that need to align horizontally next to each other without overflowing (so that the user has to scroll horizontally, no worries about vertical scrolling). This was easy as all I had to do was float all the tables and the browser would wrap them automatically.

Example:

[] [] []
[] [] []
[] [] []

However, when testing it out, whenever I "open" and "closed" the tables repeatedly (using DHTML to switch the display property to hide and display the content of the tables). They began to align into a single column, and basically wrap at the end of the first table.

Example:

[]
[]
[]
[]
[]
[]
[]

My best guess is that because I'm changing the display property of the elements dynamically, it's causing problems with the way the elements are floating/flowing.

If you've seen this before or can provide some help, it would be duely appreciatedly.

[createErrorMsg]

If I had to guess, I'd say the problem lies in the way that floats are laid out when a page is rendered. Basically, the browser takes the element and places it in it's normal place in the flow according to the source order, then removes the floated item from the flow and moves it in the direction you want it floated. Thus, when the page loads left-floated items a, b and c, they are rendered on the page like this...

a b c

When you then hide b using display:none (I assume) it takes b out of the page entirely...remember that display:none doesn't save a place in the flow for an element the way visibility:none; does. Furthermore, w3 specs say it removes the float property from b, as well. Here's a quote:

If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.

So b essentially no longer exists. It has no spot on the page. When you then go back and dynamically cause it to exist, it will be added into a pre-calculated space with no room for it, causing it to move down below the other floats until there IS room for it, creating your troublesome column.

Bear in mind I'm only theorizing here, and could be way off base, but here's a few things you might try...

1)Substitute visibility for display. Since visibility:none still creates a box for the element in the flow, dynamically altering it's visibility doesn't cause it to wink completely out of existence.

or

2)Add lines to your script that force a reload or refresh whenever the display property is altered. This would re-render the page with the float's display properties in hand. I think as long as the browser knows up front what it's dealing with, it will handle it fine. It's coming in after the fact and changing things that messes it up.

Let me know if either of these work!