2 divs плавающий правый неправильный aligment

Question

У меня есть три div. Я хочу поплавать последними двумя слева, рядом с 1-м. Но второй плавает после 3-го. Почему?

Спасибо!

это мой код:

HTML

<div id="holder_idea"><h5>something</h5></div> 
<div id="visual_holder_second">something2</div> 
<div id="invest"> 
<h2>something3</h2></div> 

CSS

#holder_idea{ 
width:200px; 
padding-right:48px; 
padding-left:32px; 
padding-top:32px; 
display:inline-block; 
} 

#visual_holder_second{ 
font-family: "Times New Roman"; 
font-size:7.5em; 
text-transform:uppercase; 
line-height:60%; 
width:140px; 
float:right; 
padding-top:32px; 
} 

#invest{float:right;} 

Answer 1

Я pressume вы хотите, чтобы это выглядело как этот

| div1 | div2| 
|  | div3| 

Если это так, пожалуйста, вспомнить что float ставит div вне нормальный поток объекта и делает его «прилипающим» как можно ближе к предыдущему элементу сбоку, переходя к следующей строке, только если в предыдущем случае больше нет места. Пример: http://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery (да, я знаю, что w3schools злой) Обратите внимание, как смена позиций меняется вместе с изменением размера окна.

Answer 2

Попробуйте изменить float: right; на float: left; и удалите width: 140px по телефону #visual_holder_second.

И на самом деле, если вы собираетесь использовать многоколоночный макет, не бойтесь использовать хорошие столы. Они получили плохой рэп от злоупотреблений в 90-е годы, но у них все еще есть свое место. ?

Answer 3

Если вы хотите, чтобы плавать слева, почему вы плавающая право ..

Применить поплавка слева все три дивы: http://jsfiddle.net/ngztf/

Ваш 140px ширина намного меньше, чем ваше фактическое содержание (что я сокращен до 3.5м для целей тестирования).

div { 
    float: left; 
    border: 1px solid green; 
} 
#holder_idea { 
    width:200px; 
    padding-right:48px; 
    padding-left:32px; 
    padding-top:32px; 
} 
#visual_holder_second { 
    font-family:"Times New Roman"; 
    font-size:3.5em; 
    text-transform:uppercase; 
    line-height:60%; 
    width:140px; 
    padding-top:32px; 
}