Getting Mac 'column view' style nested div's to offset horizontally when overflowing

I'm building an interface like "column view" on a mac.

I have nested <div> columns inside another <div> container which is set to 57% width of page. The nested div's act as columns which are always 100% height of the container. The columns vary in width up to 100% of container width depending on how many other columns there are. As new columns are added they need to compress to a min of 100px width then overflow with horizontal scroll on the container.

My problem is that as more columns are added the container overfills and the new columns are offset bellow the previous columns instead of horz to the left. How do i keep my columns lined up horizontally and splitting the container width equally. currently i'm using float: left; with clear: none;.

Also do i need JS to keep the container scrolled to the far left as new columns are added or is there a simpler way?

Thanks!

re: Getting Mac 'column view' style nested div's to offset horizontally when overflowing

I don't know a way to do this without using javascript but as you'll need to load data dynamically into the columns, javascript must already be turned on by users.

Here is a nice looking example I've found (not working properly in IE and no auto scrolling to the most recent column): http://lixlpixel.org/webfinder/

re: Getting Mac 'column view' style nested div's to offset horizontally when overflowing

serdar, that's a neat little page :-) although I think the OP was after something a little different.

Correct me if I'm wrong, but I'm guessing you are dynamically adding columns to a "floating-column" layout - your container div is centered on the page, and you want the container div to expand in width every time a new column is added.

Surely the easy way to do this is to recalculate the width very time you add or remove a column using Javascript? If you have five or more columns, new columns get a width of 100px and you add 100px to the width of your wrapping <div>. If you have less than 5 columns, then fix the width of your wrapping <div> and set the width of each column to be <width of wrapping dix> / <number of columns>.

Please, also in future, post a link to your site so we can:

1. Check the markup to ensure it's valid;
2. Check for Javascript errors and other cross-browser related stuff which you might not have thought of;
3. See ALL of your CSS code. A couple of lines is all well and good but CSS suffers from this thing called inheritance, so to determine CSS issues we need to see ALL your CSS, not just the bits you think are getting applied by class or by ID.

Please post your URL so we can take a good look at your code to determine if there's any bugs and make any further suggestions. Help us to help you!

codegecko
Moderator