html/css, stretchable edges.

Mint_Sauce · 9 Sep 2008 at 13:00

I've been building a website and am having problems trying to figure out how to make the edges stretch when the browser is resized.

Can anyone point me in the right direction? Thanks.

Shoseki · 9 Sep 2008 at 13:29

University project? Commissioned project?

Enquiring minds like mine need to know...

Conrad11 · 9 Sep 2008 at 13:36

Is anything in the edges?

Tripnologist · 9 Sep 2008 at 14:34

If the 'edges' are just a background, that's easy to do. If they're going to be filled with content, I can't think of anyway to do it tbh. (one setwidth and one variable column yes - but not two)

If it's just a background... split your page up into three sections..

Code:

<div id="header"></div>

<div id="pageBodyContainer">
  <div id="pageBody"></div>
</div>

<div id="footer"></div>

body { text-align: center;}
#header { width: 500px; margin: 0 auto; text-align: left;} 
#pageBodyContainer { width: 100%; min-width: 500px; background: #333;}
#pageBody { width: 500px; margin: 0 auto; text-align: left;}
#footer { width: 500px; margin: 0 auto; text-align: left;}

Cuchulain · 9 Sep 2008 at 14:41

It's perfectly doable

http://www.gunlaug.no/tos/moa_27a.html

Tripnologist · 9 Sep 2008 at 14:51

Learn something new everyday.

Thanks Cuchulain, I myself have a site that needs to be done like this but that's months away so I didn't bother putting a great deal of thought into how/if it could be done. You've saved me some work.

Mint_Sauce · 9 Sep 2008 at 15:03

Thanks everyone, I will give it a go.

There's nothing in the edges, just a background image (1px tiled horizontally as it's just some lines).

Draeger · 9 Sep 2008 at 15:56

Cuchulain said:
It's perfectly doable

http://www.gunlaug.no/tos/moa_27a.html

I'd like a wee look at that as well, but link no worky for me?. :confused:

Conrad11 · 9 Sep 2008 at 16:21

Draeger said:
I'd like a wee look at that as well, but link no worky for me?.

Im sure its just using the max/min-width properties...doesn't work properly in IE6 without javascript.

It's not needed for the OP

t31os · 11 Sep 2008 at 20:25

You can use IE specific code to fix any display problems.

For example, link an addition style sheet when IE5/IE6 etc... is detected.

http://msdn.microsoft.com/en-us/library/ms537512.aspx

Pain in the butt but should work fine.

Major_Disaster · 11 Sep 2008 at 21:37

Cuchulain said:
It's perfectly doable

http://www.gunlaug.no/tos/moa_27a.html

Nice link. Cheers. (Though have you seen the homepage?

)