Center two divs, with a max-width: 1224px, within a 100% width container

Question

Note: I am unable to edit the HTML, so I have to find a workaround.

HTML:

<div id="container">
    <div id="breadcrumbAds">...</div>
    <div id="breadcrumbWrapper">...</div>
    <div id="containerTopParsys">...</div>
    <div id="leftColWrapper" class="column663Wrapper">...</div>
    <div id="rightColWrapper" class="rightColumn663Wrapper">...</div>
    <div style="clear:both;"></div>
    <div id="containerBottomParsys">...</div>
    <div style="clear:both;"></div>
    <div id="bgpromo">...</div>
    <div style="clear:both;">...</div>
    <div style="clear:both;"></div>
</div>

The issue is that all of the divs inside #container , EXCEPT for #leftColWrapper and #rightColWrapper , need to be 100% width of #container , but #leftColWrapper and #rightColWrapper need to be stacked next to each other and centered (together) within the 100% #container , with a max-width of 1224px .

I tried utilizing the following jQuery to add a wrapper div around #left ... and #right ..., but it ended up grabbing the ads in those containers and placing them in the component where the JS for the page is stored.

(function($) {
    $("#leftColWrapper, #rightColWrapper").wrapAll("<div class=\"colWrapper\" />");
})(jQuery);

I either need another solution to wrap those two divs together, so that I can set a max-width of 1224px and center them, or I need to know why this jQuery is picking up those ads and duplicating them within the JS component.

Answer 1

 #container{ text-align: center; font-size: 0; } #container > div{ outline: 1px solid #333; display: inline-block; min-height: 10px; text-align: left; width: 100%; font-size: 14px; } #container #leftColWrapper, #container #rightColWrapper{ width: 50%; max-width: 612px; }

 <div id="container"> <div id="breadcrumbAds">...</div> <div id="breadcrumbWrapper">...</div> <div id="containerTopParsys">...</div> <div id="leftColWrapper" class="column663Wrapper">width: 50%;<br> max-width: 612px;</div><div id="rightColWrapper" class="rightColumn663Wrapper">width: 50%;<br> max-width: 612px;</div> <div style="clear:both;"></div> <div id="containerBottomParsys">...</div> <div style="clear:both;"></div> <div id="bgpromo">...</div> <div style="clear:both;">...</div> <div style="clear:both;"></div> </div>