Divs aligned side by side and centered

[Rhino.Freak]

So I want to have divs aligned side by side AND centered but for some reason I am unable to even though it sounds so simple.

http://codepen.io/anon/pen/KMKZXd

Basically, as you can see I want a top DIV which is big and then 4 more DIVs underneath it that align themselves nicely and are centered.
But I am unable to do so. Help me :(

I also don’t understand why even though I am using width: 25%; they are not being all in line? Isn’t 25*4 = 100 or am I missing something?

Many thanks for all the help! and PS I would appreciate if someone explains everything to me instead of giving me a working code!

ALMOST forgot to mention I aim this to be responsive :)

With love and horns,
Rhino!

EDIT: Nevermind I fixed it myself :P

[Paulie_D]

Well there’s a couple of things going on.

Firstly, without using box-sizing:border-box all your borders and padding will be added to the widths of 25% so your numbers won’t work out.

Secondly, by using display:inline-block your bottom divs become subject to the whitespace between the HTML…there are a few ways around that but pretty much all of them have their issues.

http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements

So , we use box-sizing:border-box by default (or at least most of us do, it makes things a lot easier).

But then what?

It depends on your requirements.

On option is just to float the bottom divs and provided you clear the floats you have this…I used overflow:hidden as a quick clearance method but there are others

http://codepen.io/Paulie-D/pen/RRwxzm

If you don’t have to deal with IE below IE10 I’d go with flexbox..a little more structure (I added a wrapping row..but we could manage without it if necessary) but the lower row are now all the same height automagically.

http://codepen.io/Paulie-D/pen/RRwxzm

One final thought, it’s generally not done to limit the width of the body. I understand why you might do this but I think you’ll find that it’s more practical to use a single container div and limit the width of that instead…if for no other reason that that you might need to put something outside you main column and if you limit the body you’ll probably not be able to.

[Author]

Posts