Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Center wrapper with flaoting elements

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #181135
    rudminas
    Participant

    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!

    #181145
    Soren
    Participant

    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)

    #181173
    rudminas
    Participant

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

    #181179
    Soren
    Participant

    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?

    #181181
    __
    Participant

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.