CodingForums.com - Container div to height of content?

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Container div to height of content? (http://www.codingforums.com/showthread.php?t=284962)

Container div to height of content?

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

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;

}

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

Quote:

Originally Posted by operapixie (Post 1302733)

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.

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!

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

YES! Got it to work now. THANK you!