View Full Version : Expanding <div> help

Jan 13th, 2011, 04:52 PM
Hi yall

I've just built this web template - http://studiobaum.com/Templates/template_1.html

However, I'm struggling with on last bit. I can't seem to control the height of the page and the positioning of the floating logo and small print boxes at the bottom when the main body content increases beyond the boundaries of the containing <div>. If you look at http://studiobaum.com/Templates/template_2.html you will see how the page content is much greater but the bottom of the page does not expand to suit.

Man, it's hard to explain problems in writing. If anyone knows what I'm going on about and thinks they may know an answer then please save my day!



Jan 13th, 2011, 08:48 PM
Hello sempriny,
You limit the height of .main_container to 680px. When there is more content than that, it blows out the bottom.

Remove that height and let .main_container adjust it's height to it's content. That's the natural behaviour for a div element.

You would need to clear your floats (http://www.quirksmode.org/css/clearing.html) for that to work.

try making your CSS look like this -

.main_container {
overflow: auto;
-moz-box-shadow: 0px 0px 10px #000; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 10px #000; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 10px #000; /* Opera 10.5, IE9 */
border-left: 3px solid #fff;
border-right: 3px solid #fff;
border-top: 3px solid #fff;
border-bottom: 50px solid #fff;
margin-left: auto;
margin-right: auto;
padding: 25px;

Jan 13th, 2011, 09:42 PM
Wow, this very nearly works a treat! everything expands beautifully, however, the bottom two floating elements that house the logos and small print no longer sit in perfect relation to the bottom of the site. This is because they have a set height from the top of the browser. Is there a way to make them move in relation to the bottom of the browser? Is this what you meant by clearing floats? I wasn't sure?



Jan 13th, 2011, 09:51 PM
Here's the new link to show you my new issue.

Jan 13th, 2011, 10:03 PM
Don't position #logos.
Instead, place it in your markup after the element you want it to follow and margin it to where you want it to sit, that way it will flow with content like your #main_container does now.

Jan 13th, 2011, 10:21 PM
Ahh, I see! Thanks will give this a go an get back to you.