There are actually two ways of doing this in CSS, depending on your situation:
If your inner content div has a fixed width, then the best way to handle it is to merge the left and right sides of the frame into one graphic, and put it in the background of a div that surrounds the content. Have it repeat downward, and add padding so that the text doesn't flow over the background image. There's a fantastic demo of this setup at Position Is Everything (url: http://www.positioniseverything.net/piefecta-rigid.html ).
If, on the other hand, your inner content div doesn't have a fixed width, then the only real way to do it is this:
Create 3 divs, all nested. Like this:
<div id="left">
<div id="right">
<div id="content">
Content goes here!
</div>
</div>
</div>Then, measure the pixel width of your side frames. Make all 3 of those divs relatively positioned, then make the left div shift the pixel width of the frame to the left, make the right div shift TWICE the width of the frame to the right, and then shift the content div the pixel width of your frame to the left (basically, you'll get exactly the pixel width of your frame of the left and right divs sticking out). Then add the left frame to the left div (position it at 0, 0 and repeat-y), and the right frame to the right div (0, 100% and repeat-y). Then you can make the content div have whatever background you want.
[EMAIL PROTECTED] wrote:
Dear css-discuss members,
I have a huge problem. I have a website that i am making that has a frame around the content (The brown thing, you'l see). Its not a frame like an html frame frameset thing its like a picture frame. It is made up of 4 divs arranged around 2 content divs (1 body + 1 navigation). I have a huge problem. The frame divs dont wrap around the content divs so whenever i type more than the default length of content set it goes under the frame. To see more of what i mean the website is nuttygorilla.com . I Really need help with this and would love for it to be corrected quicly. Thanks for your time.
Cheers, Jeremy
-- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox!
______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
