By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,905 Members | 2,083 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,905 IT Pros & Developers. It's quick & easy.

CSS, 3 Col stretchy layouts

P: n/a
Hi Everyone...
Ian not sure if this is possible but.. I have created a 3 col layout
with a stretchy center using pure CSS got it to work in everything..
sorted..

But the site Iam working on is aimed at multiple resolutions so it is
going to scale down to 800x600 and scale up to 1024x768...

the problem is HOW DO I STOP IT GOING PAST 1024?

Ideally I would like the container to stop at 1024 in the center of the
page with a repeating horizontal background going the full page?

I know I could use javascript get the resolution of the monitor and
display a correct template but in volves resizing the browser wind
which I do not like

Please somebody help

Oct 5 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
On 2006-10-05, Silkster <da****@shopcreator.comwrote:
Hi Everyone...
Ian not sure if this is possible but.. I have created a 3 col layout
with a stretchy center using pure CSS got it to work in everything..
sorted..

But the site Iam working on is aimed at multiple resolutions so it is
going to scale down to 800x600 and scale up to 1024x768...

the problem is HOW DO I STOP IT GOING PAST 1024?

Ideally I would like the container to stop at 1024 in the center of the
page with a repeating horizontal background going the full page?
Sounds like you need to set the max-width property on the container. You
can set width to a percentage (I'm guessing this is what you mean by
"stretchy") and max-width to 1024px. Then you'll get the percentage, but
not if it means going bigger than 1024px.

The background-image can be on something behind the container, and you
can set the container to background: transparent.

If this makes no sense then perhaps I've not understood your problem, in
which case you could post a link to an example.
Oct 5 '06 #2

P: n/a
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld...
On 2006-10-05, Silkster <da****@shopcreator.comwrote:
>the problem is HOW DO I STOP IT GOING PAST 1024?

Ideally I would like the container to stop at 1024 in the center of the
page with a repeating horizontal background going the full page?

Sounds like you need to set the max-width property on the container. You
can set width to a percentage (I'm guessing this is what you mean by
"stretchy") and max-width to 1024px. Then you'll get the percentage, but
not if it means going bigger than 1024px.
You should bear in mind that this will not work in Antiquated browsers, such
as IE6 or below. In these the max-width will be ignored, and the centre
column will continue to get larger in larger windows. It should work in
modern browsers though (and I think that this may even include IE7).

Martin
Oct 5 '06 #3

P: n/a

Martin Eyles wrote:
You should bear in mind that this will not work in Antiquated browsers, such
as IE6 or below. In these the max-width will be ignored,
Although by taking a generous interpretation of "work", this isn't a
problem.

You might ideally constrain the maximum width by setting max-width on
the outermost suitable container <div>, but if IE chooses to ignore
that, then it's hardly a major failure.

Oct 5 '06 #4

P: n/a
"Andy Dingley" <di*****@codesmiths.comwrote in message
news:11*********************@c28g2000cwb.googlegro ups.com...
>
Martin Eyles wrote:
>You should bear in mind that this will not work in Antiquated browsers,
such
as IE6 or below. In these the max-width will be ignored,

Although by taking a generous interpretation of "work", this isn't a
problem.

You might ideally constrain the maximum width by setting max-width on
the outermost suitable container <div>, but if IE chooses to ignore
that, then it's hardly a major failure.
Agreed. It's still accesible in IE6 so it isn't a problem, and it is still
the elegant solution.
Oct 5 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.