Левый выровненный поплавок: правый div

Question

Я следую принятому ответу this stack overflow question.

В приведенном выше вопросе макет состоит из изображения, за которым следует неупорядоченный список (см. JSFiddle в вопросе выше).

В моем сайте, я пытаюсь сделать то же самое, за исключением:

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

Я пробовал установить его на float:left, однако изображение затем скрывает div. Я также попытался создать еще один div с   и установить его ширину на 100% и float:right, а также попытаться создать «буфер», который будет толкать div с содержимым обратно влево, однако буфер также толкает div слишком далеко.

Что мне нужно сделать, чтобы иметь такое же поведение, как в примере JSFiddle, за исключением того, что неупорядоченный список выровнен по левому краю? Вероятно, я смогу справиться с остальными.

Редактировать Чтобы быть ясно, что я хочу, чтобы выглядеть следующим образом:

|---------||-------------------|   Empty space     | 
| Image || Unordered List | |--------------------------|  ... |End of page 
|_________||___________________|           | 

Answer 1

Избавьтесь от плавающего списка справа. Вместо добавить набивку налево к списку, с шириной изображения (myImg это идентификатор изображения, и myUl является идентификатором списка):

var imgWidth = $("#myImg").width(); 
$("#myUl").css("padding-left", imgWidth.toString() + "px"); 

http://jsfiddle.net/78zT3/1/

Answer 2

Вы должны дать ul запас налево, чтобы вытолкнуть из-под первыми делами. Поскольку первый div имеет position: absolute;, другие элементы не распознают размеры этого div и игнорируют его.

Здесь пересмотренный код fiddle

Единственные изменения находится в #iContainer ul.

Answer 3

See here for the updated fiddle

Кардинально отметить, что «образ» имеет свою позицию устанавливается в абсолютной, так что, когда вы оставили плавать список он появляется под ним. Таким образом, вам нужно установить свое положение относительно, а также оставить его влево.

Пересмотренный CSS:

#iContainer { 
    background: #ccc; 
    overflow: hidden; 
    position: relative 
} 
#iContainer div { 
    position: relative; 
    display:inline-block; 
    float:left; 
    top: 0; right: 0; bottom: 0; left: 0; 
    *height: 100% /* just for you, IE7 */ 
} 
#iContainer img { 
    height: 100%; 
} 
#iContainer ul { 
    float: left; 
}