For that matter, can I place any wide div in a narrower div? What I'm trying to do can be explained by looking at this page.
What I'm trying to do is have the div with the 1300px-wide SVG graphic – whose id is "wide2" – overlap over the div called "center." The problem is that, when I just put wide2 into center, it aligns left. Both the classes of div have margin-left: auto and margin-right: auto CSS properties, which work, assuming the div contained in "center" is narrower than "center."
My solution so far has been closing "center", then immediately opening "wide2", and then, immediately after closing that one, re-opening "center." It's not a great system, especially given the shape of the SVG in question.
Can anyone help me out?
(per request) The CSS of the classes in question.
div.center { display: block; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; padding-bottom: 0; padding-top: 0; height: 100%; width: 1000px; background: #bebebe; /* Old browsers / background: -moz-linear-gradient(left, #bebebe 0%, #ffffff 12%, #ffffff 88%, #bebebe 100%); / FF3.6+ / background: -webkit-gradient(linear, left top, right top, color-stop(0%,#bebebe), color-stop(12%,#ffffff), color-stop(88%,#ffffff), color-stop(100%,#bebebe)); / Chrome,Safari4+ / background: -webkit-linear-gradient(left, #bebebe 0%,#ffffff 12%,#ffffff 88%,#bebebe 100%); / Chrome10+,Safari5.1+ / background: -o-linear-gradient(left, #bebebe 0%,#ffffff 12%,#ffffff 88%,#bebebe 100%); / Opera 11.10+ / background: -ms-linear-gradient(left, #bebebe 0%,#ffffff 12%,#ffffff 88%,#bebebe 100%); / IE10+ / background: linear-gradient(left, #bebebe 0%,#ffffff 12%,#ffffff 88%,#bebebe 100%); / W3C / filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#bebebe',GradientType=1 ); / IE6-9 */ border-bottom: 0; border-top: 0; margin-top: 0; margin-bottom: 0; padding-bottom: 0; padding-top: 0; }
div.wide2 { display: block; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; padding-bottom: 0; padding-top: 0; height: 180; width: 1300px; border-bottom: 0; border-top: 0; margin-top: 0; margin-bottom: 0; padding-bottom: 0; padding-top: 0; }