Make the child wider than the parent in one direction

Question

I am trying to arrange a centered layout of two columns, and I would like the horizontal rules in the right column to extend to the right edge of the browser view window. This will require that these elements be wider than the parent column in which they are contained, but only on the right side.

Here is an example image:

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

And here is a quick layout in JSFiddle with HR, which are in place, but have not yet gone beyond the container:

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

It brings me together:

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

But it expands the heart rate throughout the page, and not just on the right side. Any ideas on this? Thanks!

Answer 1

If you make sure that all your creation is inside a screen size div with the property overflow: hidden; then you can make them infinitely long, and the end user will not be able to say.

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

http://jsfiddle.net/hx2YF/

Here is the fiddle. Drag the result box so that it is large enough to see the result.

Answer 2

The difficulty here is that the distance from the left edge of the container and the right end of the viewport must be known to improve the pixel. See @animuson's (pessimistic) answer for confirmation. I choose jQuery in situations like this:

 #container { position: relative; /*hr will start at the left edge of the container*/ } #container hr { left: 10px; position: absolute; } 

Then insert jQuery and run this

 $(document).ready(function() { // calculate the width account for container padding vv var w = $(window).width() - $('#container').offset().left - 10; // apply the width $('#container hr').width(w); });​ 

• Demo

---

UPDATE

• DEMO - allows you to resize the window.

Answer 3

There is no way that an absolutely positioned element can simultaneously know both the left side of its immediate parent and the right side of the root element. In addition, by making your horizontal rules absolutely positioned, you remove them from the document stream, so your text will crash under them. Then you need to add additional add-ons, etc., to drop it.

Since you are not using the predefined width positions, where everything is permanently located on the page, there really is no way to achieve this. You can make <hr> just bigger than its parent with a percentage (for example), but it won’t spread all the way to the edge of the viewport exactly for each screen size (some will push backwards, creating a horizontal scrollbar).

Answer 4

If the right column is transparent, you can use the background image of the body tag, but this will only work if the rules have a fixed position in your document (for example, in the header).

Answer 5

I created a starter for ten, which you can look at JS Fiddle .

I used the following HTML and CSS example

HTML

 <div id="example"> <h1>Example</h1> <p>Example text followed by a horizontal rule example text followed by a horizontal rule example text followed by a horizontal rule.</p> <hr> <p>Example text followed by a horizontal rule example text followed by a horizontal rule example text followed by a horizontal rule.</p> <hr> </div> 

CSS

 #example { width: 50%; margin: 0 auto; background-color: #FCFCFC; } #example hr { width: 150%; } 

Fixed fixed width

You can get the same final result with a fixed pixel width, but it's a little more complicated.

I rejected your example to demonstrate this solution on JSFiddle .

Based on the HTML you specified CSS:

 body { overflow-x: hidden; } .wrapper { /* Center the layout */ width:800px; margin:0 auto; } .leftCol { /* Left column */ width:200px; float:left; background-color:#ccc; margin:0; } .rightCol { /* Right column */ width:600px; float:right; background-color:#dadada; margin:0; } hr { /* Make the HR extend to the right edge of the viewport, outside of .rightCol*/ width: 200%; } @media only screen and (max-width: 800px) { body { overflow-x: auto; } hr { width: 100%; } } 

Please note that the final part of this solution uses a media query to reset values ​​when the viewport size changes below 800 pixels, because at the moment you want to enable the horizontal scroll bar. Media queries do not work in some older browsers, so you need to test them in the browsers you want to support. In the worst case scenario, your users lose the ability to scroll horizontally in older browsers.