float и background-image

[glutaminefree]

Приветствую!

Сегодня верстал страницу и был поражён таким эффектом: на странице блок с меню, к которому применено float: left. Текст справа от этого блока отображается нормально, все отступы учтены. Если использовать изображения внутри блоока, то тоже всё в порядке.

Но когда я задал блоку справа background-image и потом увидел результат, то был сбит с толку. Фоновое изображение расположилось в самой левой части страницы. И наплевать оно хотело, что там блок меню с float: left. Наблюдается во всех браузерах.

Это как-нибудь можно победить без помощи margin и background-position? Макет просто резиновый (отступ слева страницы резиновый, а ширина меню фиксированная, поэтому в css отступ не задать ни процентами ни пикселями).

Пример можно увидеть тут: http://jsfiddle.net/k9HNr/

[Nekromancer]

#content {overflow: hidden;}

Фактически флоат выводит элемент из потока. В этом случае #content считает, что блока нету и так как он блочный по своему поведению, растягивается на всю ширину. В следствии картинка именно в левой части этого блока.

overflow: hidden; предотвращает это, "блокируя" этот элемент и не давая элементам вне потока, управлять им (снаружи и внутри).

[Svatov]

Тут довольно уместен RTFM, верстаете блоками, значит будьте любезны смотреть иногда в спецификацию...это можно так сказать основы основ.

ССЫЛКА

[glutaminefree]

Nekromancer, спасибо за исчерпывающее объяснение!