CODEWITHSUNDEEP
htmlcss
Ni Le
Ni Le

Reputation: 199

Center divs in a 100% width div

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?

Upvotes: 1

Views: 1204

Answers (2)

Vladislav Qulin
Vladislav Qulin

Reputation: 1942

<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

Upvotes: 7

Desislav Kamenov
Desislav Kamenov

Reputation: 1203

put margin: auto; to your 2000px div

Upvotes: 0

Related Questions