Вложенный макет границы в CSS?

Question

У меня это нормально работает: http://jsfiddle.net/uwcEw/ - традиционный макет границы на css.

Я хочу сделать еще один макет границы с 5 регионами внутри "середины" границы.раскладка.Повторно применяя тот же шаблон сверху, я получаю это: http://jsfiddle.net/6bked/4/ ( отредактированная ссылка ), который не работает, очевидно, это не относительно его родительского контейнера, но я не уверенКак это исправить, чтобы я мог применить этот шаблон по мере необходимости во вложенном контексте.

Любая помощь?Также, если есть лучший способ сделать это (компас + Sass / Blueprint / JS макет), я открыт для предложений.

ОБНОВЛЕНИЕ

Я также хотел бы сделатьясно, меня интересует только эта работа в современных браузерах (Webkit, FF), в основном связанных с Webkit, и я не беспокоюсь о пользователях, у которых не включен javascript

Answer 1

Я не самый большой поклонник фиксированных макетов, но если я правильно понимаю, это то, что вы пытаетесь сделать: http://jsfiddle.net/8Cq9A/.

Размеры указаны относительно окна браузера, дажевложенный набор div.То, что вам нужно было сделать, чтобы исправить ваш макет, это настроить ваши внутренние размеры с учетом этого.Например, если ширина вашей внешней левой и правой div установлена ​​на 10% (что означает 10% ширины окна браузера) , чтобы разделить центр div на 2 равные половины, выустановил бы каждую ширину их: (100% - 10% - 10%) / 2 = 40%.

Лично я бы хотел использовать поплавки: http://jsfiddle.net/Sf8Kp/. Проблема, с которой вы столкнулисьЗдесь мы столкнемся с тем, если вам нужны столбцы одинаковой высоты, как показано в ссылке.

Есть МНОГИЕ статей, в которых рассказывается, как решить эту проблему.Несколько хороших чтений, которые были вокруг некоторое время: alistapart ( 1 , 2 ), positioniseverything .Поиск вокруг искусственных столбцов и 3 столбца [жидкость | эластичный | равной высоты] макет .