So I have a large amount of floated elements inside of a container with an overflow setting of auto. These elements (depending on screen-size) will almost always overflow to the next line as they should, however, I want to be able to center the parent div so these elements will always be centered in the page. The container is 100% of the screen width.
Oh, and to make things interesting: the size of the floated elements… is subject to change.
There’s a lot of great solutions out there that I’ve found that have to deal with a single row of floated elements, but I’m almost never going to be dealing with that few items. I will overflow to the next line practically every time, which is why those methods don’t work.
Would I be best inserting clear divs every few elements, setting the width and centering the container, or is there a better way to do this without Javascript? Thanks for any and all help!
You should be able to fix this with CSS. Put a width on your container div, and add a
margin: 0 auto;to it. I found on your page it works well with a width of 1000px. The problem is if you use a width of 100%, you can’t control how many of your floating divs will fit in one row, and when it will wrap because you don’t know the viwer’s window size. If you set a fixed width you have control over how many boxes will fit in each row.