Question

I’m attempting a centered, two-column layout and I’d like to have horizontal rules in the right column extend all of the way to the right edge of the browser viewport. This will require those elements to be wider than the parent column they are contained in, but only on the right hand side.

Here’s an example image:

_{(source: sans-concept.com)}

And here is a quick mockup at JSFiddle, with HRs that are in place but not extending outside of the container yet:

http://jsfiddle.net/ericcarl/3fQKe/

This gets me close:

hr {
   position: absolute;
   left: 0;
   right: 0;
}

But it extends the HR across the entire page and not just the right hand side. Any ideas on this? Thanks!

Answer 1

If you make sure that your whole creation is inside of a screen-sized div with property
overflow:hidden;
then you could make them infinitely long, and the end user shouldn’t be able to tell.

Something like
width:500%;
should do the trick.

http://jsfiddle.net/hx2YF/

Here’s a fiddle. Drag the result window so it’s large enough to see the result.