HTML/CSS issue: div positioned on the right

Question

I have searched a lot to solve this issue but came up empty-handed.

Basically, I have a div that is repeated on the x-axis from the center of the screen to the left side:

#example{
left:50%;
width:50%;
background-color:red;
background-repeat:repeat-x;
}

This gives the div the illusion of only repeating to the left side of the screen, which is what I want it to do. It does it. My problem is that I want to have another div that does the exact same thing except to the right. This code straight-up doesn't work:

#exampleright{
right:50%;
width:50%;
background-color:red;
background-repeat:repeat-x;
}

What's the problem? Is there a solution? Or is there another way to do this? Thanks!!

Answer 1

You might consider using float instead of left and right:

<div class="example example-left">example left</div>
<div class="example example-right">example right</div>

div.example {
    width:50%;
    background-color:red;
    background-repeat:repeat-x;
}

div.example.example-left {
    float:left;
}

div.example.example-right{
    float:right
}

http://jsfiddle.net/AAKRP/2/