1

This is what I have:

http://jsfiddle.net/kRUBY/

<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?

1
  • You are using width:100%; overflow:hidden; for the parent div and applying fixed 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
    – Shiridish
    Nov 22, 2012 at 5:46

2 Answers 2

7
<div style="width:100%; height:200px; overflow:hidden;">
    <div style="width:2000px; height:200px;position: relative; left: 50%; margin-left: -1000px">
        <div style="width:400px; height:200px; float:left; background:red;"></div>
        <div style="width:400px; height:200px; float:left; background:blue;"></div>
        <div style="width:400px; height:200px; float:left; background:yellow;"></div>
        <div style="width:400px; height:200px; float:left; background:orange;"></div>
        <div style="width:400px; height:200px; float:left; background:black;"></div>
    </div>
</div>​

Here's the link

0
0

put margin: auto; to your 2000px div

1
  • This ain't gonna work if parent div's width is less than 2kpx; Nov 22, 2012 at 5:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.