Возможно, вы захотите уточнить, насколько вы готовы быть гибким. Вы можете подойти к этому несколькими способами. Вы хотите, чтобы верхняя и нижняя границы простирались до края области просмотра (таким образом, чтобы они были по ширине)?
Вы можете справиться с этим, используя фоновые изображения с background-position
и техникой раздвижных дверей, или вы можете использовать постороннюю разметку, чтобы создать макет ширины флюида с тремя колонками с вашим изображением в центре.
Это зависит от вас, но с помощью техники с тремя столбцами вы можете вставить свои дополнительные divs
(или все, что вы хотели бы использовать) через JavaScript, чтобы у вас не было пустых контейнеров в вашем источнике, и использовать border-top
и border-bottom
вместо фоновых изображений (что приводит к потере времени загрузки страницы).
Редактировать: И чтобы уточнить, вы хотите, чтобы он выглядел примерно так, как на рисунке Ascii:
_______________
|img|_____________________
Редактировать : Для макета с изменяемой шириной обратитесь к одному из многочисленных источников по макетам CSS, вот хорошее краткое изложение:
http://www.smashingmagazine.com/2007/01/12/free-css-layouts-and-templates/
Затем в левой и правой колонках вы должны сделать border-top
и border-bottom
соответственно (или использовать background-images, если вы хотите более причудливые границы), задать границы вашего изображения и установить высоту трех контейнеров таким образом, чтобы границы выстраиваются вместе. Надеюсь, это поможет.