Centering box

[mevaser]

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,

[JoeShmoe]

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

[mevaser]

Can you see the link now?

[dfogge]

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; }

[mevaser]

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.

[Michael_bonds]

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

[joshuanhibbert]

Awesome reply @Michael_bonds. +1

[Author]

Posts