Пытаться ли сверстать такой элемент блоками?

Question

[Константин Биржаков]

Есть вот такой элемент, который отображается на одной из страниц сайта.
jsfiddle.net/KonstRuctor/k2Ttm/4/
Я сделал его в виде таблицы, выглядит как мне нужно. Сайт фиксированной ширины.
Вопрос такой – имеет ли смысл пытаться сверстать такую конструкцию блоками?
Насколько она будет кроссбраузерна?
Может быть кто-нибудь из коллег продемонстрирует решение?
Спасибо.

Answer 1

[Anton Bobylev]

Минимально меняя верстку и стили: jsfiddle.net/fGHnK/1/

Answer 2

[Владимир]

В вёрстке вообще не видно никаких проблем для использования блоков. float:left — и вперёд. С кроссбраузерностью тоже проблем не вижу

Comments

[Алексей Быхун]

Насколько я знаю, флоат не рекомендуют использовать, так как он выбивает блок из общего потока рендеринга.

[Алексей Быхун]

[del]

[Anton Bobylev]

Float при абсолютном подсчете более кросс-браузерен за счет того, что поддерживался в древних версиях ie, в отличие от inline-block, но сейчас это уже не имеет особого значения.

Answer 3

[Петруша Укропов]

Пока верстал, тут уже предложили варианты, но и я оставлю jsfiddle.net/k2Ttm/14/

Answer 4

[Алексей Быхун]

Можно задать ширину строго в пикселях, присвоив картинке и тексту (.image и .main) свойство display: inline-block;
Если привязка к пикселям не устраивает, можно задать в процентах (30% и 60%, например).

jsfiddle.net/k2Ttm/9/

Comments

[Владимир]

Непонятно, чем вас пугают float'ы. Тысячи сайтов свёрстаны на них и вроде никто не заморачивался

[Алексей Быхун]

Конкретно в данном случае флоат создает неестественную структуру, ведь нам приходится отодвигать текст, чтобы он не залазил под картинку. А inline-block показывает именно то, чего мы пытаемся достичь — поставить элементы подряд, считая их оба блоками