I have a CSS problem I am having a hard time figuring out. Here are the facts:
- I have a series of “modules” in statzen.
- The modules are a fixed width.
- The modules “float” to allow for resizing the browser window.
- I want the modules centered.
Sounds simple right? Well, I am having a hard time figuring it out.
Each “module” is a div with a fixed width and height that is set to float left. the desired behavior is that the modules will be centered on the page regardless of whether there are 2, 3, or 4 modules across. This allows the most information to be “above the fold” as possible. The problem is that no matter what I do they are on the left side of the page.
I have tried wrapping all the modules in a div and aligning that div to the center with auto margins. I have tried putting the modules inside a table cell that has align = center. I have tried wrapping the module in a div, floating that div left, and adding another div on each side with a min-width and a max-witdh to allow the spacer divs to expand and contract to the point that the number of modules would change. I have also tried floating the divs and adding auto margins to them.
Nothing has worked.
Here is what it looks like now in 2 column and 3 column widths:
As you can see the problem is that there is extra whitespace on the right unless the browser is the perfect width.
This has to be a solvable problem right? Do you have any suggestions? I am at my wits end.
Thanks
