I'm using jCarousel to implement a horizontal slide navigation website. This is my page structure.
<div id="content" class="main">
<div class="jcarousel">
<ul>
<li id="area-1">(CONTENTE HERE)</li>
<li id="area-2">(CONTENTE HERE)</li>
<li id="area-3">(CONTENTE HERE)</li>
</ul>
</div>
</div>
I'm having trouble horizontally centering the content of each area on the page. It seems to work if the width of the area is the same as the screen resolution, but I can't work with fixed widths since I need it to be centered on any resolution. This is the CSS I have right now:
.jcarousel {
position: relative;
text-align: center;
overflow: hidden;
width: 100%;
height: 100%;
}
.jcarousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.jcarousel li {
float: left;
width: 1349px;
}
This only works if the resolution is 1366*768 PX.