Split Background Centered Content

Question

Я пытаюсь сделать полноразмерный цвет фона с разделенной средой. Однако содержимое не выстраивается в линию и всегда отключается при изменении размера экрана.

Максимальная ширина - 1200 пикселей по центру, родительские divs разделены на 60%/40%. Когда вы делаете математику, это 720px/480px и должны соответствовать вышеуказанному div.

* { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.site-content { 
 
    clear: both; 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding: 32px 0; 
 
    position: relative; 
 
} 
 
.site-content, 
 
.left_container >div, 
 
.right_container>div { 
 
    border: 1px solid #000; 
 
} 
 
.left_container, 
 
.right_container { 
 
    padding-bottom: 100%; 
 
    margin-bottom: -100%; 
 
    /*Fixes float height*/ 
 
} 
 
.left_container >div, 
 
.right_container>div { 
 
    position: relative; 
 
} 
 
.left_container { 
 
    float: left; 
 
    width: 60%; 
 
    background-color: #ced7db; 
 
} 
 
.left_container > div { 
 
    float: right; 
 
    max-width: 720px; 
 
} 
 
.right_container { 
 
    background-color: #999; 
 
    float: right; 
 
    width: 40%; 
 
} 
 
.right_container > div { 
 
    max-width: 480px; 
 
}

<header> 
 
    <div class="site-content"> 
 
    <h1>Heading<h2> 
 
    </div> 
 
</header> 
 
<div id="introduction" > 
 
<div class="left_container"> 
 
    <div> 
 
     <h2>Left</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
</div> 
 
<div class="right_container"> 
 
    <div> 
 
     <h2>Right</h2> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
</div> 
 
</div>

Желаемый результат этого будет иметь область заголовка и область содержимого выровненный по левому и правому краю, в то время как фоны продолжаются до конца браузера. Я попытался использовать метод градиентного фона, процентная ширина все еще сбрасывается.

Answer 1

Я не смог сделать то, что хотел. Поэтому я решил использовать метод градиента родительского фона. Пример здесь: CSS: Set a background color which is 50% of the width of the window