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.
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.
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:
<div style="clear: both;"></div>
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.
http://bit.ly/LAD6Js
Thanks,
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:
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