Line from the left side of the screen to the end of the centered div

Question

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

This image shows how it should look:

Answer 1

here is another solution and this is a 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 2

Here is 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 3

How about this solution? no additional markup required, cross browser and independent of element width

 #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 script

Answer 4

I'm not sure if this works in all browsers, but I believe that hr takes up all the space that you provide to it. Therefore, you can give it a large negative left edge and place it in a centered div. Instead of the hr element, you can also use an empty div, which may or may not be easier to use. You can set the border-top style of this div to a wider range of border types (like a dot).

 <div id="content"> <hr id="bar" /> <div id="realcontent"> Something here </div> </div> 

With CSS:

 #content { width: 400px; margin: auto; color: white; } #bar { margin-left: -1000px; margin-bottom: 5px; background: blue; } #realcontent { background-color: #000000; }