The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

How to get DIVs to have collision detection?

  • # December 9, 2008 at 8:51 am


    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.

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

    Untitled Document

    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,

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed