{float: left;} не работает

У вас отсутствует двойная кавычка вокруг вашего идентификатора "обертки".

Я обнаружил это, пытаясь сделать скрипку из вашего кода, в котором была отмечена ошибка. (Подсказка: сделайте скрипку для нас в следующий раз)

У вас также были некоторые ошибки в CSS, и ваши ширины были странными.

Исправлена:

<div id="wrapper" style="overflow: hidden; width: 1000;">
        <div id="box2" class="greybox">Left</div>
    <div id="box1" class="greybox">Right</div>

</div>

#box1 {
    margin-top: 70;
    margin-left: 85;
    width: 200px;
    height: 450px;
    padding-left: 40px;
    padding-top: 1px;
    padding-right: 20px;
    float: left;
    overflow: hidden;
}
#box2 {
    margin-top: 70;
    margin-left: 30;
    width: 40px;
    height: 300px;
    padding-left: 0px;
    padding-top: 1px;
    overflow: hidden;
    float: left;
}

Вы можете либо поместить оба поля слева, чтобы они были бок о бок, либо поплавать вправо.

Обычно это проблема, когда ширина второго элемента не будет располагаться горизонтально внутри родителя. Класс greybox добавляет какие-либо дополнения?

Кроме того, в вашей паре идентификатор обертки отсутствует. Это дало бы родительской без ширины, если бы это было стилизовано с помощью таблицы стилей, а не встроенной и приводило к проблеме, которую я описываю.

Кроме того, стили box1 имеют синтаксическую ошибку при заполнении. Все стили ниже не вступили в силу. Это должно быть ваше исправление.

Вы должны очистить этот помощник кода. Множество ошибок, отсутствующих (px), точек с запятой, котировок и т.д....

<div id="wrapper" style="overflow: hidden; width: 1000;">
    <div id="box1"  class="greybox">Left</div>
    <div id="box2" class="greybox">Right</div>
</div>

#box1 {
width: 440px;
height: 450px;
padding: 1px 20px 0 40px; /* Order = Top, Right, Bottom, Left */
margin: 70px 0 0 85px;    /* Cleans up your code by eliminating margin-top, margin-right, margin-bottom, margin-left and same applies with padding */
float: left;
overflow: hidden;
}

#box2 {
width: 20px;
height: 300px;
padding: 1px 0 0 0;
margin: 70px 0 0 30px;
overflow: hidden;
float: left;
}

Демо: http://jsfiddle.net/ZFTzY/5/

почему у переполнения: скрыто до # box1 и # box2? вы знаете, как использовать {overflow: hidden;}

u уже поставил переполнение: скрыто в основной обертке

видеть это

<div id="wrapper" style="overflow: hidden; width: 1000px;">
<div id="box1"  class="greybox">
    left
</div>

<div id="box2" class="greybox">
Right
</div>
</div>

и css

 #box1 {
    margin-top: 70px;
    margin-left: 85px;
    width: 440px;
    height: 450px;
    padding-left: 40px;
    padding-top: 1px;
    padding-right: 20px;
    float: left;
    background:orange;

    }

    #box2 {
    margin-top: 70px;
    margin-left: 30px;
    width: 20px;
    height: 300px;
    padding-left: 0px;
    padding-top: 1px;
    background:green;
    float: left;
    }

см. jsfiddle

У вас много опечаток в вашем коде. Отсутствуют двойные кавычки и точки с запятой. Кроме того, вы забыли много раз, чтобы дать вашим значениям также единицу (например, px).

Если вы исправите все эти ошибки, все будет работать так, как ожидалось - см. JsFiddle

Почему что-то произойдет? элемент auto float остается.

Может быть, вы имеете в виду

float: right;

попробуй это ^^