Оба .box и .utility должны быть помещены в другой плавающий div, чтобы они оба были ограничены внутри. Просто упрощенный пример
<div id="content">
<div class="section">
<div class="box">
Large content area
</div>
<div class="utility">
Small content area
</div>
</div>
<div class="section">
<div class="box">
Large content area
</div>
<div class="utility">
Small content area
</div>
</div>
</div>
(пытаясь сохранить имена ваших классов там, где это возможно)
Затем вы можете установить внутренние div для отображения блока, чтобы они заполнили ограниченную область и установить фиксированную ширину для секции (я буду использовать 50% для демонстрационных целей)
.section
{float:left; width:50%;}
.box
{display:block;}
.utility
{display:block;}
Установите другие свойства стиля по мере необходимости и помните блочную модель при настройке отступов и полей. Иногда применение слишком большого или слишком малого количества из них может прервать перевод строки, если что-то установлено неправильно.
Из того, что вы предоставили, я не могу понять, почему относительное положение было бы необходимо. Если бы это было задумано как попытка создать макет, который вы продемонстрировали, я бы предложил удалить его, если только по какой-то причине вы абсолютно не располагаете что-то внутри этого элемента div относительно него.
РЕДАКТИРОВАТЬ: Не понял, что у вас есть два содержимого div и скрипка.
http://jsfiddle.net/76fXa/2/