How to get DIVs to have collision detection?

[iasiis]

Greetings,

I am working on a site with 4 DIVs.

The 1st DIV is called "container". It has the width an height of the monitor and it contains the other 3 DIVs.
The other 3DIVs consist of:

1 left column DIV named "leftcolumn" that features a background image repeating along the Y axis.
1 right column DIV named "rightcolumn" that features a background image repeating along the Y axis.
1 centered DIV named "content".

Positioning Rules for each DIV

The positioning rule for "container" is that it covers the entire browser window/monitor so I guess you can say it is anchored to each of the 4 edges of the browser window.

The positioning rule for the left column is simple. Its position is always top:0; left:0;

The positioning rule for the right column is more complex. It seems to require an if, then statement. Its position is always top:0; right:0; unless the browser window is minimized to under 1006 pixels. Once the window starts to shrink below 1006 pixels this DIV’s left edge will make contact and stop moving.

The positioning rule for the centered "content" DIV is complicated too. Its position will always be centered with in the browser window. If the browser window starts to go below 1006 pixels then this centered DIV’s left edge will hit the left column DIV’;s right edge and stop moving towards the left.

Logically, collision detection would have to be programmed onto both sides of the centered "content" DIV, the right side of the left column DIV and the left side of the right column DIV. So how can this be accomplished in CSS? Or would I have to use another programming language to make this a reality?

Here is the code I have so far.

Code:

Also I have to say that I am having problems on how to make the height of the container DIV reach 100% so in the code. I have just made it 900 pixels. I would appreciate help with that too. Thanks for viewing,
Adam

[Author]

Posts