CSS: adjust box width with margins? - css

Question

i have a box whose width is variable because it depends of the size of a container. The box has no content so im using margins to define its width relatively but it is not working. This is my code:
.box {
background: url("back.jpg") no-repeat scroll 0 0 / cover transparent;
border: 4px solid black;
box-shadow: 0 0 0 5px #826200;
outline: 3px solid white;
overflow:hidden;
}
.box:before {
content:"";
border-top: 2px solid red;
margin: -20px 0 7px -7px;
position:absolute;
width:auto;
}
This is my fiddle http://jsfiddle.net/x7rrj/3/
Please notice how the red border goes outside of the box without honoring the right margin and if i set the width to auto then the red border wont display at all. Is it possible to solve this using CSS only?
Thank you.

Answer 1

I looked at the fiddle and noticed the top red border wasn't showing.
It had a line with the padding: 0 100%;
Removing that line seem to fix your issue.
Is this the final result you wanted?
http://jsfiddle.net/z5952/
.box {
background: url("back.jpg") no-repeat scroll 0 0 / cover transparent;
border: 4px solid black;
box-shadow: 0 0 0 5px #826200;
outline: 3px solid white;
overflow:hidden;
}
.box:before {
border-top: 2px solid white;
content: "";
margin: -9px 0 7px -7px;
position: absolute;
width: auto;
}

Answer 2

Is this something you are looking for?
http://jsfiddle.net/x7rrj/16/
since you are using position:absolute to position the line, you may also use top, right and left to control the position and width as well:
.box:before {
border-top: 2px solid red;
content: "";
padding: 0 100%;
position: absolute;
top: 3px;
right: 3px;
left: 3px;
}

Answer 3

Okay, i found the answer thanks to an idea given to me by Edward. The problem was solved by replacing margins with top, left and right.
.box {
background: url("back.jpg") no-repeat scroll 0 0 / cover transparent;
border: 4px solid black;
box-shadow: 0 0 0 5px #826200;
outline: 3px solid white;
overflow:hidden;
}
.box:before {
border-top: 2px solid white;
content: "";
width: auto;
position: absolute;
top: 3px;
right: 3px;
left: 3px;
}