Responsive CSS margin
===

The goal is to accomplish this:

![enter image description here][1]


  [1]: http://i.stack.imgur.com/VXHxX.jpg

1) The black box represents a div (#black_box).

2) At a width of 1000px, the div has a negative margin and is clipped by the viewport.

3) At another width, 2000px, the negative margin is replaced by a positive margin.

4) So far the html/css looks like so:

    <section>
        <div id="content">
            [SOME STUFF]
            <div id="black_box">
                [SOME STUFF]
            </div>
        </div>
    </section>

    section { margin: 0; padding: 5%; }
    #black_box { margin-left: -5%; padding: 5% 5% 5% 10%; }

Now with viewport size increase:

    section { margin-left: 10%; padding: 5%; }
    #black_box { margin: 0; padding: 5%; }

I know there's an easy way to test viewport width with jQuery, but can you specify a range? Like viewport = 300px-1000px do this else viewport = 1001px+ do this? Thanks.