ansaurus

Question

Answer 1

A:

if I understand correctly - what you're looking for is a bit difficult to achieve without javascript. You can consider a bit different approach that is: can the sidebars (graphic borders) slide under the center content?

example:

<style type="text/css">
#wrapper { position: relative; }
#right, #left { width: 200px; position: absolute; background: gray; }
#right { right: 0; }
#left { left: 0; }
#center { width: 840px; margin: 0 auto; background: green; position: relative; }
</style>
<body>
    <div id="wrapper">
        <div id="left">left</div>
        <div id="right">right</div>
        <div id="center">center</div>
    </div>
</body>

Herhor 2010-08-19 08:55:44

Your solution give almost the same result as mine. I need the sidebars to be 100% height as they are in my code. The problem is when I display the site on a 1024x768 resolution(I want the sidebars to be cut, not shrinked). Thank you.

elblanco 2010-08-19 12:32:33

Answer 2

+1 A:

since the center element if fixed-width, this should be easy. the side border should be placed as 'background' in the body instead of having its own div.

correct me if im wrong, based on what i understand here, you want the side border to be cut/crop by 1024 resolution instead of shrink. how about you make a single image with 1280 width, place both side border images in it accordingly, left and right, leave the center area empty. save this as a single image (up to you if you want a transparent background), then do the followings.

<style type="text/css">
body { /* can also use your own div */
   background:url(path_to_the_single_image) repeat-y top center;
}

#center {
   width:840px;
   margin:0 auto; /* centered the div */
   background:green;
}
</style>

<body>
   <div id="center">center content</div>
</body>

thats it! now you should have your fixed width element in the center, and your side-borders in the background. if you load it in 1280, you should see the full border, while if you resize down to 1024, your centered element should remain there, and your side border just now should cropped out by the browser.

let me know if this is what you looking for.. :)

Faizal Heesyam 2010-08-19 13:29:12

You completly understood my problem. It's a great solution! I will give it a try. Thanks!

elblanco 2010-08-19 14:53:14

I tried it and it works. Thanks a lot faizalheesyam!

elblanco 2010-08-19 17:26:26

glad to hear that.. :)

Faizal Heesyam 2010-08-24 12:50:58

ansaurus

tags:

views:

answers:

CSS tricks to design a page

related questions