CODEWITHSUNDEEP
cssposition
qwerty
qwerty

Reputation: 981

CSS: "right" property refuse to apply?

This is driving me crazy!

I have two divs, right after the body tag. They are both absolute positioned and sized. They both have the same "left" property, but i later declare the "right" property for the second div (so "left" should be ignored!).

Here's the HTML:

<body>

<div class="previousPageButton"></div>
<div class="nextPageButton"></div>

And the CSS: (There's more code to it but it's commented out so it's irrelevant.)

.previousPageButton, .nextPageButton {
    position: absolute;
    top: 0px; left: 0px;
    display: block;
    height: 500px;;
    width: 100px;
    background: transparent url(../images/buttons/arrow_previousPage.png) no-repeat center center;
    z-index: 2;
    opacity: .1;
}

.nextPageButton {
    top: 0px; right: 150px;
    background: transparent url(../images/buttons/arrow_nextPage.png) no-repeat center center;
}

As you can see, BELOW the first CSS where i declare the "left", i have another block of CSS where i specifically declare the "right" property for .nextPageButton. Body is relatively positioned, as usual, so it should work! Do i need to "unset" the "left" property before declaring the "right" property? Is that even possible?

I know i could rip the "left" property out of the first codeblock, and then assign each div it's own left/right property.. but this should still work!

Any thoughts?

Upvotes: 5

Views: 6405

Answers (2)

thirtydot
thirtydot

Reputation: 228182

left and right are not mutually exclusive.

An element can have both the left and right properties set, like this.

If you want to "remove"/"reset" left, then you should apply left: auto.

You can lookup the "inital value" of properties, for example here's left.

Upvotes: 13

Dustin Laine
Dustin Laine

Reputation: 38503

There is some inheritance that is causing a conflict. Add left: auto; to the .nextPageButton class to prevent.

Upvotes: 3

Related Questions