This is what I have:
<style>
div.box {
width:400px;
height:200px;
float:left;
}
</style>
<div style="width:100%; height:200px; overflow:hidden;">
<div style="width:2000px; height:200px;">
<div class="box" style="background:red;"></div>
<div class="box" style="background:blue;"></div>
<div class="box" style="background:yellow;"></div>
<div class="box" style="background:orange;"></div>
<div class="box" style="background:black;"></div>
</div>
</div>
As the page is resized, I want the contents of the 2000px div to stay centered, so the yellow colored div is always in the middle of the screen.
Is it possible to do this with only css?
width:100%; overflow:hidden;
for the parent div and applyingfixed px
values for child divs, what is the use of the child div's which are overflown and hidden? You should remove them or use % values for your child divs too