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

Question

Эй, я просто пытался поставить два divs друг рядом с собой, как это я делал сотни раз, используя «float: left», но этого просто не происходит. Второй div просто сидит ниже первого.

Вот код:

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

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

и CSS:

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

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

Любая помощь будет оценена.

Answer 1

Почему что-то произойдет? оставлен автоматический поплавок.

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

float: right; 

попробовать это ^^

Answer 2

Вы недостающую двойной кавычки вокруг вашей «обертки» ид.

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

У вас также были некоторые ошибки в 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; 
} 

Вы можете плавать обе коробки влево, чтобы иметь их бок о бок, или float one right.

Answer 3

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

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

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

Answer 4

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

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

Answer 5

почему у положить переполнения: скрытый на # box1 и # Box2?у знать использование {перелива: скрытый;}

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

увидеть это

<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

Answer 6

Вы должны очистить этот код до сопряжения. Много ошибок, пропавших без вести (ПХ), точка с запятой, цитаты и т.д ...

<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/