tags:

views:

289

answers:

2

I want to make a website that fills the pagewidth to 100% for all widths (available space) lower or equal to 1280px and for all widths greater than 1280 two filling side bars should appear (like this: |fill|website|fill|).

(How) can i do this without scripts? (by using css settings?)

+1  A: 

Do you want content in the "fill" bits, or just a border type thing? If just a border, you can use a background image/colour to make the fill effect, and use max-width on the main content bit. Be aware that it won't work in IE6, if that's important to you.

<div style="max-width: (bar width * 2) + 1280">

    <div style="max-width: 1280px">

        <!-- content -->

    </div>

</div>
Turnor
thnx. however it didnt work yet (ie7/FF) the code i used to test was(picsize: 2048x3072): <html> <head> </head> <body bgcolor="#eeffff"> <div style="max-width: (bar width * 2) + 1280px"> <div style="max-width: 1280px"> <img src="TEST.jpg"> </div> </div> </body> </html> plz help!
Arjan
Somehow I don't think "max-width: (bar width * 2) + 1280" is valid CSS.
Calvin
It's not. I guess I should have made it clear, I just meant to calculate it from however big they wanted the border, and fill in the appropriate value.
Turnor
ok i understand your code. however it doesnt work the way id like to. in theory the picture should adjust to the width and stay at max 1280. however in my tests the picture keeps it's original size.
Arjan
+3  A: 

You could use something like this:

#content {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

That refers to the style applied to a div that has all the page's contents.

Your "sidebars" would be whatever the background body is.

Rob Kennedy
i tried (picsize: 2048x3072): <html><head><style type="text/css"> #content {max-width: 1280px; width: 100%; margin: 0 auto;} </style></head><body bgcolor="#eeffff"><div id="content"><img src="TEST.jpg"></div></body></html>it doesnt seem to work (see other comments) the picture stays the same
Arjan
thnx. the picture test didnt work but it works with the actual site in FireFox. In IE it doesnt work yet.
Arjan
Of course it doesn't work with the picture. You haven't applied any style to IT. You've applied style to the thing the picture is in. If you want the image to be full width, then adjust ITS size.
Rob Kennedy
i understand. do you know if it possible to make this work in IE?
Arjan