How can I expand the background of an element outside its container?

Question

I have a div that contains the h3 tag, and I want the h3 background to expand beyond the containing div tag to the edge of the page. Is there a way to do this in CSS?
I considered absolutely positioning h3, but I don't know the size from the edge of the screen to the edge of the div (where I want it to be), since the div is centered.

Answer 1

Unfortunately, what you are trying to do is not possible with simple CSS, since you need to know the distance to the right edge. Absolute positioning will work perfectly. Of course, you can do this easily using some kind of JavaScript, and even simpler if using jQuery:

$(function() {
    $('h3').each(function() {
        $(this).width($(window).width() - $(this).offset().left);
    });
});

And in CSS:

h3 {
    position: absolute;
    ...
}

Answer 2

On this page, I used Firebug to change the name of the css question.

#question-header h2 {
    background:lime;
    margin-bottom:-1000px;
    padding-bottom:1000px;
}

Here's what happened: _{(source: zastica.com )}

There is a # div with the title of the question, which applies only to the top of the question ("I have a div ..."). The key has a large bottom padding and a large (negative) bottom box.

. , overflow: hidden .

: , :

html {
    overflow-x: hidden;
}

#question-header h2 {
    padding: 0 1500px;
    margin: 0 -1500px;
}

html { overflow-x: hidden; } html { overflow-x: hidden; } - .

Answer 3

The background of the elements cannot go beyond the bounds of the frame.

In some cases, you can extend H3 outside the container by setting negative margins, but you need the exact page width.

It looks like you can just reorganize your HTML to make this possible.