Center Justification with a Background Image - There should be a standard solution...

[hagen]

Hi, I am having problems with the current scenario:

I have three divs I have floated left...

I want the middle one to be a fixed size ie: 1000px

I want the ones on the left and right to expand to fit the screen either side of it... all divs remaing in a row whatever screen size...


Why do I want to do this? Well I want a background image that is centered about the center 1000px width div and disappears on the left and right in accordance with how much space there is...

There may well be a better approach... I am guessing this is a common problem?

Any ideas? :-) Thanks -Hagen

[mlseim]

Give us a URL so we can see what's there so far.

[hagen]

Hi mlseim,

not sure it is helpful but here you go:

http://www.allyouneedtotri.com/test/test-bgdiv.php

The html is as follows (I guess I dont want width 200px on the left and right):


<div style="float:left; width: 200px; height:1400px; background-image:url(jxwd-images/bg-pictures/swimmer-lhs.jpg); background-repeat:no-repeat; background-position:right; ">
</div>


<div style="float:left;width:1000px; height:1400px; background-image:url(jxwd-images/bg-pictures/swimmer.jpg); background-repeat:no-repeat; background-position: right">
</div>


<div style="float:left; width: 200px; height:1400px; background-image:url(jxwd-images/bg-pictures/swimmer-rhs.jpg); background-repeat:no-repeat;">
</div>


I am just putting together a diagram to clarify... Thanks -Hagen

[hagen]

Here is a graphic to show what I am trying to do:

http://www.allyouneedtotri.com/test/forum-example.jpg


-Hagen

[mlseim]

I think having one large background image would be the best.
So I attempted to make it one image using MS Paint.

Here's my shot at it:
http://www.catpin.com/center/

Try that on a few large monitors and see what happens.

[hagen]

Hi Thanks for the efforts, but I am afraid that is no good because it would cut the navigation off the left hand side of the centeral site... I also dont think the designer and customer would be happy about me chaning functionality... It needs to work as specified...

NB I submitted this post as you would expect this to be a fairly normal situation...

IE there are a large portion of fixed width center justified sites... You would expect some of them to want a common background across the whole width...

:-)

-Hagen

[hagen]

Sorry being dim...

Think the solution does lie in what you were describing...

The key point is:

background-position: center top;

All I need to do now is to restrict the change in width somehow in the central region...

Thank you! :-)

[hagen]

Thanks works lovely finished as follows:

<div style="margin: auto auto; background-image:url(/jxwd-images/bg-pictures/swimmer.jpg); background-repeat:no-repeat; background-position:center top">


<div style="width:1000px; margin:auto auto">

</div>
</div>


-Hagen

[mlseim]

Shoot us a real URL so we can see it.
It might be helpful if we can test it with different browsers and screen sizes.

[hagen]

Hmmmmmm, there is a floor...

See: http://www.allyouneedtotri.com/test/races.html

As the width becomes smaller then 1000px the bg picture carries on moving...

Any more ideas?

Thanks -Hagen