CSS - Nest Areas

I'm creating an area that will have code snippets in it, I want it to scroll horizontally (wrapping may make the code inaccurate in some languages), but vertically I want the height of the area to grow dynamically. An example can be seen on this page:

http://scratchprojects.com/2006/02/sample_article_tic_tac_toe_p02.php

The problem is, in IE, if there is a horizontal scroll bar, it doesn't make quite enough room, so you have to scroll vertically as well. Shrink your browser window so the code snippet at the bottom of the page doesn't fit and you'll see the two scrollbars appear. In Firefox and Opera, just the horizontal scrollbar shows up.

Here's the basics of the code:

Code:

<div class="code">
<pre class="codeblock">Private Sub menuAboutTTT_Click(ByVal sender _
As System.Object, ByVal e As System.EventArgs) Handles menuAboutTTT.Click
	MessageBox.Show("Tic-Tac-Toe v1.0" & vbCrLf & _
		"See how this and other programs work at" & _
		vbCrLf & "http://www.scratchprojects.com")
End Sub ' menuAboutTTT_Click</pre>
</div>

Here's the style sheet:

Code:

.code {
	text-align: center;
	margin: 15px;
}

.codeblock {
	text-align: left;
	background: #fff;
	border: 1px;
	border-style: inset;
	width: 99%;
	height: auto;
	overflow: auto;
}

Any help would be appreciated. Thanks.

Hi

I've got 4 divs that are of the exact same size. I need them to all occupy the same real estate on a page.

three of them will always be hidden and only one is visible at a time, this is controled by javascript.

My question is what kind of positioning tricks do I have to do in order to make these 4 identical sized divs occupy the same space.

I tried relative positioning like this

div1{ position:relative; top:0; left:0; height:200px;}
div2{ position:relative; top:-200; left:0;height:200px;}
div3{ position:relative; top:-400; left:0;height:200px;}
div4{ position:relative; top:-600; left:0;height:200px;}

This only moved the contents of each div up to the desired location, however, it did not move the actual div itself, so I'm left with the reserved 600px high worth of empty space

Please help

I'm having trouble getting the height to be the same for two divs. One is a big content area (left) and the other is a vertical menu (right) that is created dynamically with PHP. I need the bottom of both divs to line up UNLESS there is a lot of content in the left div that makes the left side taller. (So, if there's not much text in the left content area, it should go ahead and line up with the bottom of the menu.) Is this possible? I'm stumped. Any help would be greatly appreciated! Thank you.

Code:

#content {width: 750px;height: 100%;position: relative;margin: 10px 25px 0 25px;}

/*BEGIN LOCATION PAGES MINIMUM HEIGHT STYLES*/
/* for Mozilla/Safari/Opera */
*>.boxContent {padding-top: 900px;min-height: 1px;}
*>#locDoctors, .locInfoMap {margin-top: -900px;}
/* for IE, with IE5/Mac backslash filter \*/
* html .boxContent {height: 900px;}
/* end filter */
/*END LOCATION PAGES MINIMUM HEIGHT STYLES*/

/*BEGIN LOCATION BOX*/
#locationBox {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 614px;height:810px;position: relative;background-position: bottom;background-color: #DDF0F2;}
#locationBox .boxTop {background-image: url(../images/location/pgTopLocation.gif);background-repeat: no-repeat;width: 100%;height: 20px;}
#locationBox .locInfoMap {width: 100%;height: 408px;background-image: url(../images/location/mapLarge.gif);background-repeat: no-repeat;background-position: top right;}
#locationBox .boxBot {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 100%;height: 15px;}
/*END LOCATION BOX*/

/*LOCATION MENU START*/
#locationMenu {width: 136px;position: absolute;z-index: 10;right: 0px;}
#locMenuList {margin: 0;padding: 0;font-size: 9px;list-style: none;}
#locMenuList li {margin: 0;padding: 0;display: inline;}
#locMenuList li.main {height: 30px;height /**/: 30px;/* for IE5/Win only */ }
#locMenuList li.sub {height: 20px;height /**/: 20px;/* for IE5/Win only */ }
#locMenuList li a {text-decoration: none;color: #FFFFFF;}
#locMenuList li.locHead {display: block;margin: 0;padding: 10px 9px 9px;font-weight: 900;color: #FFFFFF;}
...
/*LOCATION MENU END*/

Code:

<div id="content"><!--CONTENT SECTION START-->
   PHP MENU IS CREATED HERE...
   <div id="locationBox"><!--OPEN BOX-->
      <div class="boxTop"></div>
      <div class="boxContent">
         <div class="locInfoMap">
            MAIN CONTENT GOES HERE...
         </div>
      </div>
   </div><!--CLOSE BOX-->
</div><!--CONTENT SECTION END-->