CSS difficulty horizontally displaying / repeating left and right wrapper images to ends of screen

Question

I am having trouble getting my left and right repeaters to fill the available space left on wide screens for a website I am working on. The left and right repeaters are background images (approxamately 350px wide) that I would like to show part of, or even repeat if the screen (visible area of screen shown in red) becomes wide enough.

Any help or suggestions would be greatly appreciated!

Thanks,

John

Answer 1

Your widths should be set to percentages.

Answer 2

to elaborate more on babikers response:

assuming your repeaters are different images (if they aren't this becomes trivial)

There's a few ways off the top of my head (untested):

• left div width 50% or body -- background has left repeater
• right div width 50% -- background right repeater

• absolute position, z-index up the content on top of it

• body -- background has left repeater, position relative (maybe optional?)

• wrapper div has no width -- background right repeater -- position relative (to body) left 50%

• inner wrapper position absolute left (or margin left) -1/2 width of content (e.g. 480px for a 960px layout)

• use display: table... or use tables lol

Answer 3

Kill the float on ids: right_wrap_container and right_repeater.

(Based on: http://tmw.isystems.co.nz/ as served at 16:25, New Zealand time.)