CSS aligns div 1 to center and div 2 to right justification

Question

Please see http://jsfiddle.net/zygnz/1/

<div class="container"> <div class="left"> LEFT </div> <div class="right"> RIGHT </div> </div> 

Is it possible to align the left block in the center of the page and on the right side elsewhere ??

Answer 1

If you want to centralize div 1 to the remaining space (container-div2), you can create a container with text-align: center and float div 2 to the right.

Otherwise, I would use an absolute position.

Answer 2

I created a fiddle for you. It will work if you use fixed width for div. If not just rewrite CSS with some javascript.

CSS

 .container { display:block; width:400px; height:250px; background-color:black; /* not necessary */ } .center { width:100px; height:240px; background-color:white; /* not necessary */ float:left; margin-left:150px; /*(width_of_container/2)-(width_of_center/2)*/ } .right { width:100px; height:240px; background-color:white; /* not necessary */ float:right; }