CSS Center align Divs

I have a section of a page that can have up to five boxes across that contain dynamic content.  Right now I have the bo class floating left.  However, if I have 1, 2 or 3 boxes I want them to center on the page, not float.  How do I do that?

.related-product-box {
	padding:1%;
	width:23%;
	text-align:center;
	float:left;
}

Open in new window

LVL 7
rgranlundAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

F IgorDeveloperCommented:
Try using relative margin. See an example  at https://jsfiddle.net/FranIg/2tmvvqoj/

.related-product-box {
	padding:1%;
	width:24%;
	text-align:center;
	float:left;
        margin: 3%;
}

Open in new window

0
Julian HansenCommented:
Firstly I would suggest taking a look at one of the responsive frameworks like Bootstrap or Foundation. If you are not able to implement them then there is still benefit to look at their CSS to see how they deal wit these things.

For instance - you want up to 5 boxes floated left but your width is 23% with padding either side of 1% suggesting only four boxes.
Either way - if you look at the Responsive Grid CSS of one of the frameworks above you will see they have some neat tricks to getting around the padding issue.

Firstly make your widths exact percentages of the proportion of the screen they will use - so if four boxes then 25%, five boxes 20% etc.

Make your padding: 15px 0. To stop the boxes extending more than 100% because of the padding make your box-sizing: border-box. This has the effect of including the padding in the width of the box rather than adding to it.

Then look at how the frameworks enclose grid cells in a row class that has margin-left: -15px and margin-right: 15px to counter the outer padding on the first and last elements as well as a clear: both to clear the floats.

Here is a sample using Bootstrap that demonstrates the concept. The sample includes two custom classes (.row-centered and .col-centered that extend the bootstrap styles to achieve the desired effect.

You can look at the Bootstrap.css file to see how .row, .col-lg-3 are defined - there is not much styling that is needed to achieve the effect.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.