Line from left side of screen to end of centered div

Question

I want to make a 1 px line from the left side of the screen to the end of a centered div. The div is centered with margin: auto;.

This image shows how it should look:

Answer 1

Here's an example using calc:

.box{
    width:200px;
    height:200px;
    border:1px solid blue;
    margin:0 auto;
}

.line{
    border: 1px solid red;
    width: calc(((100% - 200px)/2) + 200px);
}

JSFiddle

Browser support

Answer 2

here is another solution and it is cross browser http://jsfiddle.net/9qrSy/3

<div class="inner"></div>
<div class="wrapp"></div>

css 



   body {
    padding:8px;
}
div.wrapp {
    width:300px;
    height:300px;
    border:2px solid green;
    margin:auto;
    position:relative;
}
div.wrapp:before {
    content:'';
    position:absolute;
    width:100%;
    height:1px;
    right:0;
    top:-6px;
    background:blue;
    z-index:1;

}
.inner {
    width:50%;
    float:left;
    position:absolute;
    height:1px;
    left:0;
    top:12px;
     background:blue;


}

Answer 3

How about this solution? no extra markup needed, cross browser and does not depend on the width of the element

#content {
    width:400px;
    height: 200px;
    margin:auto;
    position: relative;
}

#content:before{
    content: '';
    height: 1px;
    background: red;
    position: absolute;
    top: -5px;
    right: 0;
    width: 999%; /*a large number*/
}

Demo fiddle