Solved

Struggling with getting page to grow with content css

Posted on 2012-03-25
4
386 Views
Last Modified: 2012-06-22
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
0
Comment
Question by:nsteele84
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37763033
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37763100
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 37763109
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
 

Author Closing Comment

by:nsteele84
ID: 37763126
Thanks
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Obsolete font tag need to convert to CSS 3 36
CSS Flex space-between 2 22
Asp response.write to clients 6 34
html5 1 17
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question