CODEWITHSUNDEEP
jquerycss
Irene T.
Irene T.

Reputation: 1393

Centering a div in different resolution

i have a div with the attributes bellow:

.videosHolder {
width:970px;
padding:5px;
float:left;
}

now i have another div with the attributes:

.rightbar{
    width:222px;
    padding-bottom:10px;
    float:right;
    margin-top:10px;
    margin-right: 10px;
}

So my first is floating: left and it is ok, the second floats right but i want to center it after the space of the .videosHolder that this space depends of screen resolution. And i mean if my screen resolution is 1300px and the first div has 970px then i must center the second div in the space of 330px. So 330px - 222px = 108px but this 108px space will be a different number if my resolution is 1600px..

Thank you!

Upvotes: 0

Views: 57

Answers (2)

Bart
Bart

Reputation: 636

You could do something like this

HTML:

<div id="right">
    <div id="right-center">
        test test
    </div>
</div>

<div id="left">
    test test
</div>

CSS:

#left 
{
    width: 100px; /* You can change this to 970px */
    background-color: red;
}

#right 
{
    position: absolute;
    left: 100px; /* You can change this to 970px */
    right: 0;

}

#right-center 
{
    margin: 0 auto;
    width: 80px; /* You can change this to 222px */
    background-color: blue;
}

See it in action: http://jsfiddle.net/8QYfa/3/

Upvotes: 1

Christophe
Christophe

Reputation: 4828

add a div with class rightbar-inner inside your rightbar, give it a width and center that div.

Then only float your div with class videosHolder. And set the margin-right of the rightbar div equal to the width of the videosHolder (if you use a compiler like LESS or SASS you can save the width in a variable and use that to set the width and margin-right)

See this example. I made the width's of the div smaller so it is easier to test. if you resize (not the browser but the veritcal line in the middle of the page) you can see that the rightbar is resizing while the rightbar-inner stays centered.

http://jsfiddle.net/gwHC2/1/

Upvotes: 0

Related Questions