Страница с фиксированными элементами и заполненная другими?

Решение №1

Я думаю, что будущий способ решения этой проблемы будет связан с исключениями CSS.

Посмотрите эту скрипту в IE10+

Исключения CSS расширяют понятие обертывания содержимого, которое ранее ограничивалось float.... Элементы компонуют свой встроенный контент в своей области содержимого и обертывают области исключения в связанном с ними контексте обертывания (--excerpts из спецификации)

В этой статье msdn также объясняются исключения

... веб-авторы теперь могут обертывать текст так, чтобы он полностью окружал элементы, тем самым избегая традиционных ограничений поплавков. Вместо того, чтобы ограничивать элементы плавающей либо влево, либо вправо относительно их положения в потоке документа, CSS Исключения могут быть расположены на определенном расстоянии от верхней, нижней, левой или правой сторон содержащего блока, оставаясь частью поток документов.

По иронии судьбы, на сегодняшний день это работает только в IE10 (посмотрите на wrap-flow: оба здесь)

Вот как выглядит код:

<div class="container">
    <div class="exclusion1"></div>
    <div class="exclusion2"></div>
    <div class="dummy_text">
       text here
    </div>
</div> 

CSS

.exclusion1,  .exclusion2
{
    -ms-wrap-flow: both;
    -ms-wrap-margin: 10px;
    z-index: 1;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom: 0;
    margin: auto;
}
.exclusion1
{
    width: 150px;
    height: 150px;
    background: yellow;
}
.exclusion2
{
    width: 250px;
    height: 50px;
    background: blue;
    margin-top: 320px;
}

Решение №2

Статья CSS-трюков Faking 'float: center с Pseudo Elements должна помочь.

FIDDLE

наценка

<div id="page-wrap">    
    <img src="http://placekitten.com/250/250" id="logo">

    <div id="l">
        <p>left column text</p>
    </div>

    <div id="r">
        <p>right column text</p>
    </div>
 </div>

CSS

#logo {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -125px;
}
#l, #r {
    width: 49%;
}
#l:before, #r:before {
    content: "";
    width: 125px;
    height: 250px;
}
#l {
    float: left;
}
#l:before {
    float: right;
}

#r {
    float: right;
}
#r:before {
    float: left;
}