Панель навигации с тремя столбцами <DIV>, основанная на ширине центра <DIV>

Question

Я пытаюсь выполнить навигационную панель, которая выровнена по центру, дополнена с обеих сторон левым и правым отступом.

Фактическая панель навигации в настоящее время является блоком inline-block, содержащим мои теги для ссылок и левое и правое переходное изображение, которое приведет к фону панели навигации, чтобы занять оставшееся пространство.

Как правило, я бы расположил панель навигации по центру ширины в 100% и использовал бы этот широкий div в качестве фона, но, поскольку я использую полупрозрачные файлы .png, я не могу так перекрываться.

Макет, который я хотел бы:

Изображение макета с тремя DIV http://i28.tinypic.com/3451y6c.png (Нажмите на изображение, чтобы посмотреть в полный размер.)

Я обновил этот вопрос, чтобы включить фактическое изображение того, с чем я работаю. В настоящее время я установил три <div> s (Технически, центр - <UL>) на фиксированную ширину, но я хотел бы добавить гибкость добавления / удаления ссылок, и это будет соответственно расширять и уменьшать <div> s , Как я уже говорил ранее, я не могу выровнять центральные ссылки по центру и накладывать их на фон, потому что я использую полупрозрачные .png файлы для изображений.

Answer 1

На самом деле, вам не нужно заполнять <div>.Все, что вам нужно сделать, это указать горизонтальное поле auto, которое будет автоматически расширяться для захвата всего доступного пространства (таким образом, центрируя ваш контент как побочный эффект).

Answer 2

Хорошо, я выполнил макет, используя таблицу из 3 столбцов. Я не указал ширину для левой и правой ячеек, и я указал ширину центральной ячейки как 0. Центральная ячейка растягивается, чтобы заполнить содержимое, и отталкивает две правые ячейки.

Кто-нибудь знает какие-либо проблемы с этим?