Center wrapper with flaoting elements

[rudminas]

Hello Guys!

I have a problem and I’m stuck for couple of days already. I’m pretty sure you can do it somehow with css only!

So first of all I have a container which is fluid and inside that container I have wrapper and quite few blocks. I have no idea how many blocks there will be. All blocks inside wrapper are floated left. What I need to do is to center the wrapper and all blocks should be aligned left.

see this image: https://www.dropbox.com/s/f6l582fxtq127py/Screenshot%202014-08-30%2012.05.38.png?dl=0

And fiddle: http://jsfiddle.net/rudminas/ufxsehe4/

Thanks for help!

[Soren]

Here’s a quick way using your code.

http://codepen.io/soren-tree/pen/yAFJE

To keep things fluid, instead of a fixed width (124px) on the floated divs I’ve used a percentage (25%).

However you build this, don’t forget to clear floated elements by adding a “clear” class to the parent element (see the codepen CSS for example)

[rudminas]

That’s the problem. Floated divs should be fixed width.

[Soren]

Ok. So you have a container that’s 60% wide.
Inside this you want a wrap to be centered.
wrap is 100% width of container by default.

Is centering the container not a possibility?

[__]

Might try inline-block instead of floats… sounds more like what you want.

[Author]

Posts