Question

I have a problem here, which I’ve not come across before and can’t seem to think of any reasonable solution that doesn’t require a) breaking apart the existing layout, or b) creating a new, weird layout.

Below, I will demonstrate what I am trying to acheive. I’ve seen it many times on other sites:

<div class="MainContainerDIV" style="width: 960px; height: 100%;">
    <div class="SubDIV" style=width: fill up the browser viewport completely, even extending outside of the parent div; height: 150px;">
        <p>blah blah blah</p>
    </div>
</div>

Could someone please give me some pointers as to how I should go about this properly?

Answer 1

If you apply position: absolute to the sub div, it removes it from the document flow, and you can then specify a width of 100%. You can see the results in this jsfiddle. One thing to bear in mind, is that if you apply absolute or relative positioning to the parent div, it will no longer work.