Он ведет себя именно так, как и должен.Первый div в разметке перемещается и, таким образом, выводится из потока.Это займет 150x150 слотов вверх в верхнем левом углу, и все, что последует за ним в разметке, будет пытаться втиснуть слева в пространство справа от плавающего div, что и делает первый контентный div.div - это элементы уровня блока, поэтому они занимают всю ширину доступного пространства.В отличие от встроенного элемента, они не будут уменьшаться, чтобы соответствовать отображаемому тексту.
Первый элемент содержимого будет растянут до самого правого края окна.Если вам интересно, почему первый div (float div) не вел себя как элемент уровня блока, это потому, что он был плавающим, что приведет к его сжатию, чтобы соответствовать его содержимому (в вашем случае вы дали ему явную ширину 150 пикселей).
После того, как браузер отобразил div с плавающей точкой и div с содержимым, он исчерпал оставшийся пробел, поэтому он переходит на следующую строку и начинается с самого начала этой строки для второго div с содержимым.
Похоже, вы пытаетесь настроить панель навигации, а затем контент.Если вы поместите свой контент в div и поместите этот div влево, вы останетесь справа от золотого div, но падение столбца произойдет, если размер браузера слишком мал, чтобы вместить их.Таким образом, вам нужен родительский div с шириной для обоих типов: float и content.Я добавил в вашу разметку div-упаковщик на 800 пикселей.
.....
div#contentwrapper {
float: left;
width: 550px;
}
#outerwrapper {
width: 800px;
}
</style>
</head>
<body>
<div id="outerwrapper">
<div id='float'>
Float text.
</div>
<div id="contentwrapper">
<div class='content'>
Content text.
</div>
<div class='content'>
Content text.
</div>
</div>
</div>
.....
Возможно, вы захотите использовать другое имя, отличное от зарезервированного для css слова "float" для ваших div.Для получения дополнительной информации по CSS float .