Container div to height of content?

operapixie · 12-28-2012, 06:07 PM

Hi there,
I'm working on a new template for a client, and I want the main body of the page to have a drop shadow, but of course it's difficult to set drop shadows for just certain sides of a div. So I decided to create a container div that would have the shadows. The problem I'm running in to is that without setting the "body,html" to 100%, the container only stretches down a little ways. BUT, with that "body,html" set to 100%, it stretches far past where I need it to be.

http://dev.yourbusybee.com/kaleco/te...lecoindex.html

I WANT it to be going to just above the copyright notice, right at the edge of the tiled footer background. I thought that was where I'd set the closed div for that container, but that's not where it's stopping.

Help?

~Laura

Excavator · 12-28-2012, 06:50 PM

Hello operapixie,
You wrap the entire site in .shadowbox and put a 100% height on it so, of course, that's what it does.

If you want your shadow to stop at the bottom of .outer and not enclose #copyright, you will need to close .shadowbox sooner. The 100% height would have to go too.

Look at it like this -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Kaleco Floral Design</title>
<link href="kaleco.css" rel="stylesheet" type="text/css" />
<script src="js-image-slider.js" type="text/javascript"></script>
</head>
<body>
    <div class="shadowbox">
        <div id="header">
            <div id="xcontainer">    
                <ul class="social">
                        <li class="facebook"><a href="#"><strong>Facebook</strong></a></li>
                        <li class="twitter"><a href="#"><strong>Twitter</strong></a></li>
                        <li class="pinterest"><a href="#"><strong>Pinterest</strong></a></li>
                        <li class="rss"><a href="#"><strong>RSS</strong></a></li>
                </ul>
            <!--end xcontainer--></div>        
            <div id="banner">
                <img class="top_logo" src="kalecologoa.png" width="235" style="margin-top:-97px;margin-left:40px;">
                <h1>KALECO DESIGN</h1>            
                <ul id="button">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Store</a></li>
                        <li><a href="#">Contact Us</a></li>
                </ul>                                                                                                
            </div>
        <!--end header--></div>            
            <div class="main">
            <!--end .main--></div>            
                <div class="outer">    
                    <div class="inner"></div>
                <!--end .outer--></div> 
    <!--end .shadowbox--></div>       
        <div id="copyright">
            <span class="nav4">
                &copy; 2012 Kaleco Designs, all rights reserved. | Web Design by 
                <a href="http://www.yourbusybee.com/" title="YourBusyBee.com" target="_blank">YourBusyBee.com</a>.
            </span>
        <!--end copyright--></div>
</body>
</html>

And, like I mentioned earlier -

Code:

.shadowbox {
	width: 1020px;
	/*height:100%;*/
	margin-left:auto;
	margin-right:auto;
	-moz-border-top-left-radius: 15px;
	border-top-left-radius: 15px;
	-moz-border-top-right-radius: 15px;
	border-top-right-radius: 15px;
	-moz-border-bottom-left-radius: 15px;
	border-bottom-left-radius: 15px;
	-moz-border-bottom-right-radius: 15px;
	border-bottom-right-radius: 15px;
	-webkit-box-shadow: 0px -2.6px 7px #ccc;
	-moz-box-shadow: 0px -2.6px 7px #ccc;
	box-shadow: 0px -2.6px 7px #ccc;
}

operapixie · 12-28-2012, 07:02 PM

Thanks so much, Excavator.

I've made those changes, but it's still not right. It seems that the shadowbox container is only a few pixels tall, and is behind everything, which then causes the copyright notice to appear up at the top of the page.

Hmmmm...I'm sure I did something wrong from what you suggested though. It's not uncommon for me to miss little details (blame my raging ADD...LOL)

~Laura

Excavator · 12-28-2012, 07:08 PM

Quote:

Originally Posted by operapixie

Thanks so much, Excavator.

I've made those changes, but it's still not right. It seems that the shadowbox container is only a few pixels tall, and is behind everything, which then causes the copyright notice to appear up at the top of the page.

Hmmmm...I'm sure I did something wrong from what you suggested though. It's not uncommon for me to miss little details (blame my raging ADD...LOL)

~Laura

Look at my original post, I've gone back and highlighted other closing tags - some of which your code did not have.
A good way to find that sort of thing is by validating. Check out the links in my signature.

operapixie · 12-28-2012, 07:47 PM

Ok. Definitely getting closer. I will have to look more carefully when I'm back in my office and have fewer distractions. Thank you so much, Excavator!

Excavator · 12-28-2012, 08:07 PM

Now you close .shadowbox before your footer. Did you want .outer to have no shadow?

operapixie · 12-29-2012, 05:50 PM

YES! Got it to work now. THANK you!