Centering a wide DIV within another narrower DIV - html

Question

I have two div's, one nested within the other. The main div has the css property max-width:100% so that it cant go wider than the users screen. Now, the second div is very wide (1400px), and contains lots of other elements, but not all on the edges need to be seen. So, how (ideally without Javascript) can I have the second wide div centered within the first div, so that when the users screen is only 1000px wide, instead of the first 1000px of the wide div being shown and the remainder cropped, have 200px cropped from the left and right, with the 1000px being taken from the center?
CODE
<div style="max-width:100%">
<div style="position:relative;width:1400px">
<!-- PICTURES, LINKS, ETC -->
</div>
</div>

Answer 1

You can achieve this with a technique called shrink wrapping. You will need an additional div wrapping the large inner div that pulls it relatively to the left. The inner div can correct itself and pull itself halfway over to the right compared to its container. This should have the effect you seek.
<div class="max-width-container">
<div class="shrink-wrap">
<div class="very-wide-inner-div"></div>
</div>
</div>
.shrink-wrap {
float: right;
position: relative;
left: -50%;
}
.very-wide-inner-div {
position: relative;
left: 50%;
width: $some_huge_number;
}
http://jsfiddle.net/2j2mh/

Answer 2

assuming your html looks something like this:
<div class="narrow"><div class="wide">blah de blah</div></div>
think you may be able to do it with something like this:
.narrow {width:1000px; overflow:hidden;}
.wide {width:1400px; position:relative; left:50%; margin-left:-700px;}
the margin-left is half of the width of the .wide div
if you inspect the element in the fiddle you will see it is sat in the middle
http://jsfiddle.net/peteng/dtNKr/4/