Сохранение плавающих divs внутри ограничений страницы

Question

Я не уверен, что это можно сделать без javascript, но я надеюсь, что у него есть решение. Рассмотрим эту скрипку: http://jsfiddle.net/PPeYH/

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.content { 
    border: 1px solid; 
    min-height: 3em; 
} 
.container { 
    max-width: 600px; 
    margin: 0 auto; 
    overflow: hidden; 
    clear: both; 
} 
#placeholder-body { 
    position: relative; 
    border: 0; 
} 
.split-tile { 
    float: left; 
} 
.split-left { 
    width: 60%; 
} 
.split-left .content { 
    margin-left: auto; 
    margin-right: 0; 
    max-width: 360px; 
} 
.split-right { 
    width: 40%; 
} 
.split-right .content { 
    margin-left: 0; 
    margin-right: auto; 
    max-width: 240px; 
} 

---

<div><div class="content container">Header</div></div> 
<div id="placeholder-body"> 
    <div><div class="content container">Some content</div></div> 

    <div class="tile-1 split-tile split-left"> 
     <div class="content">60% width.</div> 
    </div> 
    <div class="tile-2 split-tile split-right"> 
     <div class="content">40%</div> 
    </div> 

    <div><div class="content container">Some content</div></div> 
</div> 
<div><div class="content container">Footer</div></div> 

Структура вы видите здесь, это упрощенная версия структуры RWD. Нам нужен весь макет, чтобы он оставался внутри его границ. Если вы измените ширину браузера вверх или вниз, вы увидите, что разделители, отмеченные «60%» и «40%», не соблюдают границы остальных разделов.

«Почему бы вам не просто обернуть 60% и 40% div в контейнере?», Спросите вы. Ну, структура DOM, представленная здесь, выложена с использованием CMS в уже сложной системе. Для этого потребуется больше, чем просто рефакторинг. Мне придется жить, когда плитки выкладываются так, как они есть.

Так что мой вопрос в этом; есть ли способ достичь разделения 60/40 на средних divs таким образом, чтобы они сохраняли левый и правый края остальной части макета, используя ТОЛЬКО css?

UPDATE: Я не могу сдерживать # замещающие-тело к максимальной ширине либо, потому что мой дизайнер хочет, чтобы я полноширинный цвет фона для некоторых див в структуре.

Answer 1

Если вы можете изменить #placeholder-body стиль, то решение простое:

#placeholder-body { 
    max-width: 600px; 
    margin: auto; 
} 

Работа образца: http://jsfiddle.net/PPeYH/1/

Другая возможность:

.split-tile { 
    margin: auto; 
    max-width: 600px; 
    width: 100%; 
} 
.split-left .content { 
    width: 60%; 
} 
.split-right .content { 
    margin-left: auto; 
    width: 40%; 
} 
.split-left { 
    height: 0; 
} 

Здесь нет поплавок не используется, но левый заголовок имеет высоту, равную 0, но переполнение видимо, поэтому оно выглядит отлично , Проблема в том, что контент больше, чем в правом названии. Вы также можете установить отрицательное верхнее поле на split-right вместо установки высоты на 0 на split-left, но вы должны знать точную высоту.

Работа образец: http://jsfiddle.net/PPeYH/3/

Кроме этого Можно запрос СМИ и calc из CSS3:

@media screen and (min-width: 638px) { 
    .split-left { 
     width: 360px; 
     margin-left: calc(50% - 300px); 
    } 
    .split-left .content { 
     width: 360px; 
    } 
    .split-right { 
     width: 240px; 
     margin-right: calc(50% - 300px); 
    } 
    .split-right .content { 
     margin-left: 0; 
     width: 240px; 
    } 
} 

Работы образец: http://jsfiddle.net/PPeYH/5/

Answer 2

fiddle если вы вставляете разделенные плитки внутри другого контейнера, это работает.

<div class="container"> 
    <div class="tile-1 split-tile split-left"> 
     <div class="content"> 
      60% width. 
     </div> 
    </div> 
    <div class="tile-2 split-tile split-right"> 
     <div class="content"> 
      40% 
     </div> 
    </div> 
</div>