Как сверстать такой шаблон?

Question

[tuutli]

Ширина 900px. цветовое оф. по вашему вкусу...
Я пытался, лажа получается.

Answer 1

[Мари Арти]

jsfiddle.net/miminari13/k5h4c не самое красивое решение, но проблему с плавающими блоками решает. а, я так понимаю, проблема в этом и была

Comments

[Shaks]

Мне кажется что челу пох на реализацию, ему просто надо чтобы кто-либо за него это сделал.

[tuutli]

@shaks Не надо такого писать. Мне не пох, мне надо понять. Я делал что-то подобное. Спасибо. Можно еще взять див внутри него его 3 дива запихать для каждой линии по диву. Поставить значение:блоки. И уже использовать обтекание по левому и правому.. Но по мне это слишком мудрено, за-то кроссбраузерно.

[tuutli]

Слушай, спасибо. Я кое-что понял)) Это хоть и не самое нужное, но ты подтолкнул на 1ну идею, надеюсь получится.

[tuutli]

@miminari13 Вот к примеру, если сделать так #container {max-width: 900px}, то будет шаблон будет адаптивным. Но это уже на заметку)

Answer 2

[Павел]

а в чем "лажа" , картинке float:left; заголовку text-alagin:center; снизу полоске бекграунд ..

Comments

[tuutli]

Разваливается

Answer 3

[Юрий Лобанов]

Сесть за изучение html, css основательно, и сверстать.

Comments

[tuutli]

Знаю, просто кода много выходит. Вот в чем моя беда. Для реализации подобного нормально 7 div и 120 строк css кода ? Я думаю что слишком. Когда начинаю что-то сокращать, верска ломается.. Не могу найти что-то по проще. Хотя шаблон не такой уж и сложный.

Answer 4

[Shaks]

Рекомендую к прочтению (чтиво про сетки):
habrahabr.ru/post/149816
www.960grid.ru

Comments

[tuutli]

Она не поможет...
Я сделал что-то похожее, с очисткой флоаутов.

[Shaks]

Чтиво про сетки не поможет сделать сетку?.. всё очень плохо. Тогда попробуй скачать готовый вариант (второй линк), или воспользоваться любым другим css framework'ом, где уже все написано за тебя.

[tuutli]

@shaks Не сетка нужна.