nsteele84
asked on
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
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
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);
}
#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);
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks
Open in new window
bottomFrame.jpgleftFrame.jpg
rightFrame.jpg
topFrame.jpg