Position Absolute

The set up.

The web page is a simple layout. I want to place a "box" that overlaps the left column and the content area, as shown in this illustration. I also want the "box" 47 pixels from the side of the left column.

This is the HTML for the left Column.

<div id="leftcolumn">
<div id="bluebox">
</div>
</div>

As you can see the bluebox is "nested" inside the left column.

This is the CSS for the Left Column.

#leftcolumn {
             border: inset white 2px; 
             clear: left;
             float: left;
             width: 200px;
             height:500px;
             background-color: #9F6;
             }
        

This is the CSS for the Bluebox

    #bluebox {
	position:absolute;
	left:47px; 
	top:350px;
	width:350px;
	height:225px;
	background-color:#CFF;
	border: double red 4px;
	z-index:10;
    }

If you popup the actual web page with this link Pop-up the puzzle page and if you resize the browser (make it large as you can... ) you'll discover that the bluebox is positioned not to the left side of the left column, but to the left side of the BROWSER!)

What's the fix??? When you popup the bluebox puzzle, you can view the source, the menu is usually View > Source. You can then copy the source and paste it into your web editor, and fix the errant bluebox!

Have fun!

Click here and