CSS: два плавающих элемента перекрываются

У меня есть два блока в контейнере. Один плавает влево, а другой - вправо. Оба примерно на 60% ширины контейнера и спроектированы таким образом, что они перекрываются посередине (правый div имеет приоритет).

Как мне заставить их перекрывать друг друга, а не складывать по вертикали, как это обычно бывает с плавающими элементами? Если я полностью позиционирую правый элемент, содержащий его div не расширяется, чтобы соответствовать содержимому.

Код (к сожалению, я не могу исправить это, поскольку их серверы доступны только для чтения из атм):

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

#container {
    width: 400px;
    background-color: #eee;
}

#left {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    float: left;
}

#right {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    float: right;
}