Трехколоночный макет

<div class='left'>
left content
</div>
<div class='right'>
right content
</div>
<div class='center'>
main content
</div>

    .left { float:left; width:200px; height:100px; background:#008b8b; }
    .right { float:right; width:200px; height:100px; background:#008b8b; }
    .center { margin:0 200px; height:100px; background:#bdb76b; }

Обратите внимание, что правый блок в HTML стоит раньше центрального.

Не знаю в чем дело, но почему-то никто на этот вопрос мне не может ответить...