Extending borders

Question

I have an image that will be centered (left and right) in the window, there is no left border,but there is a right border. I was wondering if it is possible for the top border to go from the very left of the page (past the image) and stop at the right border and for the bottom border to start at the left end of the image and stretch across all the way to the right of the window. The top and bottom borders are made of two different repeating backgrounds and the left border can be too, if needed.

I've been thinking about this for a while but couldn't come up with any solutions...can someone help me?

Answer 1

You might want to clarify how flexible you're willing to be. You can approach this multiple ways. Do you want the top and bottom borders to extend to the edge of the viewport (thus needing them to be fluid-width)?

You can handle this using background images with background-position and a sliding door technique, or you can use extraneous markup to create a three-column fluid width layout with your image in the center.

It is up to you but with the three-column technique, you could insert your extra divs (or whatever you would like to use) via JavaScript so you wouldn't have empty containers in your source, and use border-top and border-bottom instead of background images (thus shedding some load-time off of the page).

Edit: And to clarify, you want it to look something like this Ascii drawing:

_______________
               |img|_____________________

Edit: For the fluid width layout, consult one of many numerous sources on CSS Layouts, here's a good rundown: http://www.smashingmagazine.com/2007/01/12/free-css-layouts-and-templates/

Then on your left and right columns, you would do border-top and border-bottom respectively (or use background-images if you want fancier borders), give your image borders and have the height of your three containers set so the borders line up together. Hope that helps.