|
CSS - Getting A <div> To Strech
Hello - this is kinda random.
I'm the "webmaster" for my barbershop quartet, NARD(www.nardthewebsite.com). I made our original website with a bunch of tables and thrown-together design, but after realizing how useful CSS is, I'm redoing the entire website while teaching myself CSS. I've recently come across a problem that I'm not quite sure how to solve. Mind you, I'm just learning CSS, so my design/layout/etc is probably very sloppy. For this I apologize. Here is the new design. http://www.geneseo.edu/~dgg2/NARD/Experiment/Tester.htm If you look at the design I have now(I've been using Firefox, and I'm aware there are incompatibilities with IE, please bear with me) you'll notice there's a red "bar" on the left underneath the main navigation header, and then the white column on the right, where the content will go. The red thing on the left is really three images - a top section, a bottom section, and then a middle section. I have the middle section set to repeat vertically. The three pictures are each seperate divs, grouped together in a container div, which is grouped with the content box in a larger div. What I want to happen is that the text in the content box will go as far as it needs to. This, in turn, will stretch the overall container box to a certain height. Then, the div container holding the three image divs will inherit this height; however, because only the middle div can stretch(it's height is set to 100%) it will be the only one that grows in size, and thus, will fill up the space, with the top and bottom pictures capping off the ends. That is the effect I want. However, I'm unable to accomplish this - when I try to do it with the code I have now(and I have messed around for a while) nothing quite works. Any ideas? Thank you very much in advance for your help. P.S. - I realize my css is probably very sloppy, and again, I apologize - I'm just a beginner. Similar TutorialsCurrently, my main content div has a repeated-y background. However, when my text doesn't span the entire window, it cuts off. Instead, I'd like it to stretch all the way down to my sticky footer. I'm no expert at CSS, and I'm stumped. I've searched all over and tried all sorts of fixes, but I just can't see the problem. Help? Thanks! URL CSS: Code: * { margin:0; padding:0; } html, body, #wrap { height: 100%; min-height:100%; /* thanks to http://blog.fakedarren.com/2010/01/cross-browser-css-gradients/ */ /* and http://www.puremango.co.uk/2010/04/css-gradient/ */ /* fallback (Opera) */ background: #8cb6e9; /* Mozilla: */ background: -moz-linear-gradient(top, #8cb6e9, #e0effc); /* Chrome, Safari:*/ background: -webkit-gradient(linear, left top, left bottom, from(#8cb6e9), to(#e0effc)); /* MSIE */ filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#8cb6e9', EndColorStr='#e0effc', GradientType=0); } body > #wrap {height: auto; min-height: 100%;} #main { padding-bottom: 116px; height:100%; } /* must be same height as the footer */ #contentwrapper { margin: 0 auto; height:100%; min-height:100%; } #content { background-image:url(containerbg.jpg); background-repeat:repeat-y; margin: 0 auto; width:1000px; height:100%; min-height:100%; } #footer { position: relative; margin-top: -116px; /* negative value of footer height */ height: 116px; background-image:url(layout/footer.png); width:100%; background-position:center; clear:both; } /* CLEAR FIX*/ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
HTML: Code: <body> <div id="wrap"> <div id="main" class="clearfix"> </div> <div id="contentwrapper"> <div id="content"> <p>Your website content here.</p> </div> </div> </div> </div> <div id="footer"></div> </body> |
|||||||