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!!
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
}