Grow your CSS skills. Land your dream job.

Centering box

  • # June 7, 2012 at 3:11 pm

    Hello, I am working a website, and for the life of me, I can not center the slider. Any help? I need some one’s eyes.

    http://bit.ly/LAD6Js

    Thanks,

    # June 7, 2012 at 5:54 pm

    Hi, can you show some code? I don’t suppose that the link you put there is what’s not working?!?!?

    # June 13, 2012 at 4:36 pm

    Can you see the link now?

    # June 13, 2012 at 4:52 pm

    try putting whatever you need to center in a div with a distinct id and add the following to your css:

    your-elements-id{ margin:0 auto; }
    # June 13, 2012 at 4:56 pm

    Thank you, but, the thing is, that the div that needs to be centered is inside of a div that has position: absolute, thus, it does not want to be centered. We tried this before, plus with a width of 960px. That is the problem.

    # June 13, 2012 at 11:03 pm

    Hi, mevaser. I took a look at some of your css, and I have found most of the problems.

    First off, you should know that centering content within a container that has been absolutely positioned is of course possible. The link below will demonstrate this.

    http://jsbin.com/aseher/edit#javascript,html,live

    Now, after looking at your css, I have noticed that you are making extensive use of css positioning. Now, don’t get me wrong when I say this, but positioning is probably not the best way to go about laying out a web page. Positioning has its purpose, and uses, but should not be taken advantage of.

    The slider it’s self has inline styles that is effecting its position. if you can possibly change this, that would be a great start.

    There is a lot that needs to be fixed with the css, but what I would suggest doing is, remove the positioning from the slider, and any content that may cause the issue to persist. Try laying out the page using floats and margins. You will probably find that this is much easier, and does not break your site.

    One thing you should know though, is that creating a layout using floats can cause some headaches as well. Make sure to clear your floats! One way would be to have a simple div at the end of all your floated elements that looks something like this:

    That is probably the easiest way to go about it, and carries some benefits along with it.

    Another way would be to apply the following css to the parent container of the floated elements:

    #theParent {
    overflow: hidden;
    }

    One of the problems that occurs when floating elements is that the parent will in a way lose track of its children, and not follow the height that the children span. So clearing the floats will take care of this.

    I wish I could help you more, but in all honesty, that would require me to re-write much of the css for at least the slider alone.

    I really do hope I have helped!!

    -Mike

    # June 14, 2012 at 12:30 am

    Awesome reply @Michael_bonds. +1

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".