Why won't you float!?

http://sandbox.willpracht.net/

I decided to swallow my pride and post this on here.

The main box in the middle (#body-container) should have many .post-container's in it, all floated left so that it scrolls horizontally and not vertically at all.

I've floated the .post-container's, set the width on #body-container to auto.
It doesn't want to work.
I'm not sure why :(.

I've tried looking at it thru Firebug. It looks like .post-container's are being floated, just stacking on top of each other anyway.

If anyone can help, that'd be greatly appreciated.

Thank you very much,
Will

Doesn't width:auto work based on the browser window width? I assume you were hoping that the floated elements would make the page grow wider? Float only floats up to the page/container limits.

If the posts are created dynamically you could position them absolutely with left: values to allow for those which came before. I'm sure there is a better way though. I'll leave it to someone else to point out why you should never have horizontal scrolling though because I don't agree as you can see from an old semi-abandoned project of mine!

Quote:

---

Originally Posted by DaiLaughing

Doesn't width:auto work based on the browser window width? I assume you were hoping that the floated elements would make the page grow wider? Float only floats up to the page/container limits.

If the posts are created dynamically you could position them absolutely with left: values to allow for those which came before. I'm sure there is a better way though. I'll leave it to someone else to point out why you should never have horizontal scrolling though because I don't agree as you can see from an old semi-abandoned project of mine!

---

width: auto is based on the child elements. The parent expands to fit those child elements.

I am wanting the floated elements to make the parent grow wider. So, #body-container should expand according to how many .post-container's there are.

If I did absolute positioning, each .post-container will be at left: 0, mixing together. Not what I want.

That's why I asked if the page was dynamic. The scripting would then set each left: to allow for the existing elements. As I said float will not make the container grow wider as far as I know.

If the page is not dynamic then you could manually set the left:

The page is dynamic.

I see what you're getting at... I would like to steer away from absolute positioning. I suppose it would work, but I know that floating works as well...just not working at the moment for some reason.

Alright, I give up. Absolute positioning it is ;).

Thanks for your help :).

I have fiddled with it and the only other way I can see (and this might be better) is to...

Get the number of posts from the database (assuming they are fixed width). Set the width of the containing div to that number multiplied by the width (plus any padding, border and margin). Then everything should float off the side of the page.

No absolutes - any better?