Still need help with collapsing pages…

[nchipping]

I have been working on more and more pages for the site I’ve been doing (knowonder.com/index.php is the home page for it), but I am having to create a defined height for each of my main-content areas for each page, because they are different. Is there a way I can just make it fit automatically what is within it, and expand to what that is without having issues? I tried putting it to 100% and it just shrunk up into nothing, and everything collapsed…

The code I am having to change the height on each time is my container, which holds the pictures and main content. Does that make sense? I have used relative positioning on the container, so I can have absolute positioning within it, so I’m not sure if that is possibly what is messing things up, but I don’t want to use margins to position things.

I would REALLY appreciate any help!

Here is my code of one page, and my main style sheet, just for reference:

Code:

• 
• |
• 

• ABOUT
• |
• MAGAZINE
• |
• MEDIA
• |
• SUBSCRIBE
• |
• SUBMIT
• |
• CONTACT US

Subscribe

---

check all that apply

     I would like to receive a FREE, physical, in-my-hand, 132 page copy of each         new knowonder!™ issue. I am more than happy to pay the nominal fee of
        $ 0.79 to cover postage each month. I understand that this amount will be         charged up-front to my credit/debit card.
     I would like to receive a FREE digital copy of each new issue in my inbox
         every month.

“I can’t wait to get my hands on this magazine! What a great idea!
I love reading, and I know the importance of having new matieral
all the time to help my kids stay interested in reading. Thank you,
Knowonder, for such a great product!”

— Janice B., NY.

“Very cool, and also very cute! This looks like a winner. My family
will be subscribing for a long time to come.”

— Susan K., MI.

“As an elementary teacher, I can tell you that new material, every
day, is one of the biggest keys to helping a child love reading. New
adventures, new problems, new challenges, new friendships…
There’s nothing like an exciting story to excite the imaginations of
our children. I will support Knowonder!”

— Lucinda M., NB.

• 
• 
• 

Code:

* {margin:0px; padding:0px;}

p {font-family:Arial, Helvetica, sans-serif;}

ul {font-family:Arial, Helvetica, sans-serif;}

img {text-decoration:none; border:none;}

body {background:url(../images/background_03.png); background-repeat:repeat;}

#container {width: 980px; height:660px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
#container-contact {width: 980px; height:800px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
#container-about {width: 980px; height:780px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
#container-storytime {width: 980px; height:880px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
#container-crafts {width: 980px; height:590px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
#container-media {width: 980px; height:700px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
#container-signup {width: 980px; height:740px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
#container2 {width: 980px; position:relative; margin:30px auto;}
#container2 p {margin:0px 50px 5px 50px; font-family:Arial, Helvetica, sans-serif; font-size:13px;}

#header {padding:5px 0px 0px 0px;}

#login {float: right; list-style:none; color:#CCC; position:absolute; top:10px; left:840px;}
#login ul {list-style:none;}
#login ul li {list-style:none; float:left; padding:0px 5px 0px 5px;}

#magazine-free {float: left; position:absolute; top:0px; left:390px;}

#nav {position:absolute; top:100px; left:0px; width:980px; height:25px; background:#E977AF; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#nav ul {list-style:none; position:absolute; top:5px; left:195px;}
#nav ul li {list-style:none; float:left; padding:0px 10px 0px 10px;}
#nav a {color:#FFF; text-decoration:none}
#nav a:hover {color:#FFF; text-decoration:none;}
#nav a:visited {color:#FFF; text-decoration:none}

#body {background: #D3EDF1; width:875px; height:480px; position: relative; border:#47C3D3 solid 1px;}
#body-header {position: absolute; top:12px;}

#body-left {float: left; width:232px; position:absolute; top:125px; left:25px;}

#body-left2 {float: left; width:253px; position:absolute; top:140px; left:285px; font-family:Arial, Helvetica, sans-serif;}
#body-left2 p {color:#00AEEF; margin:5px 0px 40px 20px; font-size:13px;}

#body-right {float: right; width:253px; position:absolute; top:140px; right:35px; font-family:Arial, Helvetica, sans-serif;}
#body-right p {color:#00AEEF; margin:5px 0px 40px 20px; font-size:13px;}

#winmoney {list-style:none; float:right; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#winmoney ul {list-style:none; position:absolute; top:90px; left:60px;}
#winmoney ul li {list-style:none; float:left; margin:0px 3px; }

#winmoney a {text-decoration:none; color:#00AEEF;}
#winmoney a:hover {text-decoration:underline; color:#00AEEF}
#winmoney a:visited {text-decoration:none; color:#00AEEF;}

#winmoney2 {list-style:none; float:right; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#winmoney2 ul {list-style:none; position:absolute; top:210px; left:60px;}
#winmoney2 ul li {list-style:none; float:left; margin:0px 3px;}

#winmoney2 a {text-decoration:none; color:#00AEEF;}
#winmoney2 a:hover {text-decoration:underline; color:#00AEEF}
#winmoney2 a:visited {text-decoration:none; color:#00AEEF;}

#winmoney3 {list-style:none; float:right; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#winmoney3 ul {list-style:none; position:absolute; top:90px; left:60px;}
#winmoney3 ul li {list-style:none; float:left; margin:0px 3px;}

#winmoney3 a {text-decoration:none; color:#00AEEF;}
#winmoney3 a:hover {text-decoration:underline; color:#00AEEF}
#winmoney3 a:visited {text-decoration:none; color:#00AEEF;}

#left {width:468px; height:430px; border:#E977AF solid 1px; background:#FFF; position:relative; margin:0px 0px 30px 0px;}
#left-text {position:absolute; top:120px;}

#right {width:468px; height:430px; border:#E977AF solid 1px; background:#FFF; position:relative; margin:0px 0px 30px 0px;}

#right-nav {position:absolute; top:400px; left:175px; list-style:none;}
#right-nav ul {list-style:none;}
#right-nav ul li {list-style:none; float:left; margin:0px 10px;}

#body2 {background:#FFF; width:900px; position:relative;}
#left-pics {float:left; width:160px; position:absolute; top:160px; left:30px;}
#right-pics {float:right; width:160px; position:absolute; top:160px; right:-60px;}
#main-no-pics {float:left; width:512px; position:absolute; top:160px; left:230px; font-family:Arial, Helvetica, sans-serif; font-size:14px;color:#666}
#main-no-pics a{color:#666; text-decoration:none;}
#main-no-pics a:hover{text-decoration:underline;}

#main-about {float:left; width:512px; position:absolute; top:160px; left:230px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666;}
#main-about2 {margin:10px 0px; position:absolute; top:30px; left:0px;}
#main-about2 a{text-decoration:none; color:#666}

#main-no-pics-l {float:left;}
#main-no-pics-l input{margin:5px auto;}

/*THIS IS THE CSS FOR THE FORM STUFF OF THE WEBSITE*/

input.required {width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #000;}

select.required {width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #000;}

td.required {font-family:Arial, Helvetica, sans-serif; font-size:12px; }

input.optional {width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #999;}

select.optional {width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #666;}

td.optional {font-family:Arial, Helvetica, sans-serif; font-size:12px; }

input.submit {border: solid 2px #000;font-family:Arial, Helvetica, sans-serif; font-size:14px;}

/*THE END OF THE FORM CSS*/

#art {width:875px; margin:30px auto; padding:0px 0px 20px 0px;}
#art-pic {float:left; width:244px; position:absolute; top:160px; left:30px;}
#art-main {float:left; width:545px; position:absolute; top:160px; left:230px;}
#art-main p {font-family:Arial, Helvetica, sans-serif; font-size:13px; margin:14px 0px 0px 0px;}
#art-dizzle {float:right; width:39px; margin:45px 6px 30px 0px;}
#art-dizzle2 {float:right; width:39px; margin:87px 6px 30px 0px;}
#art-dizzle3 {float:right; width:39px; margin:3px 6px 30px 0px;}

#art-main2 {float:left; width:545px; position:absolute; top:160px; left:320px;}
#art-main2 p {font-family:Arial, Helvetica, sans-serif; font-size:13px; margin:14px 0px 0px 0px;}

#crafts-main {float:left; width:545px; position:absolute; top:140px; left:320px;}
#crafts-main p {font-family:Arial, Helvetica, sans-serif; font-size:13px; margin:14px 0px 0px 0px;}

#art-dizzle-page-orange{float:right; width:16px; height:40px; position:absolute; top:127px; right:0px; background:url(../images/yellow_slice.png) no-repeat}
#art-dizzle-page-orange:hover {background:url(../images/orange.png) no-repeat; height:40px; width:45px;}
#art-dizzle-page-orange a {display:block; width:100%; height:100%;}

#art-dizzle-page-green {float:right; width:16px; height:40px; position:absolute; top:169px; right:0px; background:url(../images/green_slice.png) no-repeat}
#art-dizzle-page-green:hover {background:url(../images/green.png) no-repeat; height:40px; width:45px;}
#art-dizzle-page-green a{display:block; width:100%; height:100%;}

#art-dizzle-page-pink {float:right; width:16px; height:40px; position:absolute; top:212px; right:0px; background:url(../images/pink_slice.png) no-repeat}
#art-dizzle-page-pink:hover {background:url(../images/pink.png) no-repeat; height:40px; width:45px;}
#art-dizzle-page-pink a{display:block; width:100%; height:100%;}

#art-buttons {position:absolute; top:545px; left:0px;}
#art-buttons ul {list-style:none;}
#art-buttons ul li {list-style:none; float:left;}

#art-buttons2 {position:absolute; top:345px; left:0px;}
#art-buttons2 ul {list-style:none;}
#art-buttons2 ul li {list-style:none; float:left;}

#craft-buttons {position:absolute; top:370px; left:0px;}
#craft-buttons ul {list-style:none;}
#craft-buttons ul li {list-style:none; float:left;}

#list-l {float:left; margin:0px 0px 0px 50px;}
#list-r {float:right; margin:0px 0px 0px 50px;}

#art-main2 {float:left; width:545px; position:absolute; top:150px; left:320px;}
#art-main2 p{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:15px 0px 0px 0px;}
#art-nav-buttons{position:absolute; top:370px; left:-5px;}
#art-nav-buttons ul {list-style:none}
#art-nav-buttons ul li {list-style:none; margin: 10px 0px;}

/*HERE ARE WHERE THE CLASSES START*/
.clear {clear:both;}
.stories {color:#FF9933; font-size:22px;}
.art {color:#A0CF67; font-size:22px;}
.crafts {color:#F173AC; font-size:22px;}
.more {color:#5F4B9F; font-size:22px;}

/*BOX STUFF*/
.inside {width: 980px; position:relative; margin:30px auto;}
.inside .tl { position: absolute; width: 12px; height: 12px; background: url(../images/images/tl2_03.png); top: -1px; left: -1px; }
.inside .tr { width: 12px; height: 12px; background: url(../images/images/tr2_03.png); position: absolute; top: -1px; right: -1px; }
.inside .bl { width: 12px; height: 12px; background: url(../images/images/bl2_03.png); position: absolute; bottom: -1px; left: -1px; }
.inside .br { width: 12px; height: 12px; background: url(../images/images/br2_03.png); position: absolute; bottom: -1px; right: -1px; }

/*INNER BLUE BOX ROUNDED CORNERS*/
.box2 {width: 875px; position:absolute; top:120px; left:50px; margin:30px auto;}
.box2 .tl2 { position: absolute; width: 12px; height: 12px; background: url(../images/corners/images/tl.png); top: -1px; left: -1px; }
.box2 .tr2 { width: 12px; height: 12px; background: url(../images/corners/images/tr.png); position: absolute; top: -1px; right: -1px; }
.box2 .bl2 { width: 12px; height: 12px; background: url(../images/corners/images/bl.png); position: absolute; bottom: -1px; left: -1px; }
.box2 .br2 { width: 12px; height: 12px; background: url(../images/corners/images/br.png); position: absolute; bottom: -1px; right: -1px; }

/*BOTTOM BOX ROUNDED CORNERS*/
.box3 {width: 468px; position:absolute; top:0px; float:left;}
.box3 .tl3 { position: absolute; width: 12px; height: 12px; background: url(../images/images/tl2_03.png); top: -1px; left: -1px; }
.box3 .tr3 { width: 12px; height: 12px; background: url(../images/images/tr2_03.png); position: absolute; top: -1px; right: -1px; }
.box3 .bl3 { width: 12px; height: 12px; background: url(../images/images/bl2_03.png); position: absolute; bottom: -1px; left: -1px; }
.box3 .br3 { width: 12px; height: 12px; background: url(../images/images/br2_03.png); position: absolute; bottom: -1px; right: -1px; }

.box4 {width: 468px; position:absolute; top:0px; right:0px; float:right;}
.box4 .tl4 { position: absolute; width: 12px; height: 12px; background: url(../images/images/tl2_03.png); top: -1px; left: -1px; }
.box4 .tr4 { width: 12px; height: 12px; background: url(../images/images/tr2_03.png); position: absolute; top: -1px; right: -1px; }
.box4 .bl4 { width: 12px; height: 12px; background: url(../images/images/bl2_03.png); position: absolute; bottom: -1px; left: -1px; }
.box4 .br4 { width: 12px; height: 12px; background: url(../images/images/br2_03.png); position: absolute; bottom: -1px; right: -1px; }

[nchipping]

Anyone have any ideas here? I really need some help please!

[nchipping]

Does ANYONE know how to get this right?

[apostrophe]

Slice it into 3 horizontal parts and repeat the centre one on the y axis.

[nchipping]

apostrophe,

I’m sorry, but I’m not quite clear on what you mean… Are you saying to take the #container div and make it 3 separate divs, each containing their own parts, like the header, body, and then the background between the main body and the two information pieces on the bottom of the site? I am willing to try a bunch of different solutions to fix this…

[apostrophe]

You will have to redo these images as I only had the flattened version to play with which made getting rid of the background difficult. But this should give you the idea.
html:

Code:

THE CONTENT

and the css:

Code:

#container {
background:transparent url(path/to/bg_container_center.jpg) repeat-y scroll 0 0;
float:left;
width:982px;
}

#container_top {
background:transparent url(path/to/bg_container_top.jpg) no-repeat scroll 0 0;
float:left;
width:982px;
}

#container_bottom {
background:transparent url(path/to/bg_container_bottom.jpg) no-repeat scroll left bottom;
float:left;
width:982px;
}

[nchipping]

So let me make sure I’m understanding what you’re saying correctly…

You are saying to put the div #container_bottom inside the #container_top, which is inside the div #container – correct? The #container_bottom would hold the main content, and then the top would be there and then the #container around it all. Is that what you meant?

I’m sorry if my brain is just fried, but I can’t understand how that would work – could you please try to explain it a little further?

[apostrophe]

I’ve done it for you and I really don’t see how I can make it any clearer, the code and the images speak for themselves.

[Author]

Posts