Struggling with getting page to grow with content css

Hi

I have a page here:

http://www.scfsb.com/NewLI/reservationstep2.php

I need this page to grow in length as more content is added to the area. I have been playing with it for a while but cannot seem to get it to work fully. I can get some of it to grow but other portions stay the same. I tried setting every div to a float but then I lost the background. Can I mix floats and absolutes on the same page or is there an easier way to do it. I have attached the relevant css files.

Thanks
main.css
step2.css
nsteele84Asked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
My original idea of using the table has better cross browser compatibility but it's a little old fashioned. For example, your border radius css will not in IE except for IE9. Min-height is also problematic. You can overcome the border radius issue by using something like curvycorners.js.
0
 
Tom BeckCommented:
You are going to have to replace your static sized frame with something that can grow dynamically. The best way in your case is with a table where the top and bottom rows contain the top and bottom of the frame as a background image. The left and right frames are in <td>s that can expand in height with a repeating background image. Content goes in the center <td> and can expand as needed.
<div id="Rooms_ContentBackground">

		<table cellpadding="0" cellspacing="0" border="0">
		    <tr>
		        <td colspan="3" style="width:940px;height:64px;background:url(images/topFrame.jpg) no-repeat"></td>
		    </tr>
		    <tr>
		        <td style="width:33px;background:url(images/leftFrame.jpg) repeat-y"></td>
		        <td style="width:799px;background-color:#f5ecdb;padding:0 30px;">Text goes here</td>
		        <td style="width:48px;background:url(images/rightFrame.jpg) repeat-y"></td>
		    </tr>
		    <tr>
		        <td colspan="3" style="width:940px;height:127px;background:url(images/bottomFrame.jpg) no-repeat"></td>
		    </tr>
		</table>

      </div>

Open in new window

bottomFrame.jpg
leftFrame.jpg
rightFrame.jpg
topFrame.jpg
0
 
Tom BeckCommented:
Never mind the above post, sorry for the inconvenience. What you already have will work, you just need to make adjustments to your css for two items. This should get you fairly close.
#Rooms_ContentBackground {
      position:absolute;
      left:0px;
      top:328px;
      padding:34px 0 80px 33px;
      width:907px;
      min-height:150px;
      z-index:3;
      background-image: url(images/background.gif);
      background-repeat: repeat;
}
#Rooms_MainContentArea {      
      width:825px;
      min-height:15px;
      z-index:4;
      padding:15px;
      background-color: #F6ECDC;
      border: medium solid #DA703C;
      -moz-border-radius: 32px;
      -webkit-border-radius: 32px;
      border-radius: 32px;
      behavior: url(../border-radius.htc);
}
0
 
nsteele84Author Commented:
Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.