Issue with DIV and Box Shadow

Hello, I’m experiencing an issue while attempting to add a box-shadow to my layout. It APPEARS, but I’m struggling because the div box containing all the other div boxes is only appeared (with border) as a very small rectangle rather than around the entirety of the page content.

As seen here:

If I FLOAT that main container, it appears all around the other content but its all explicit to the left or right which isn’t what I’m after.

I very carefully made sure that the main DIV contained all the other DIV tags so I don’t quite understand why it appears as that little rectangle unless I float it but if anyone can help me with this I’d be much appreciated.

Thanks in advance.
Attached:
The DIV code for my HTML

<!--START MAIN-->
<div class="main">
					<!-- START HEADER -->
					<div class="header">
       						<div class="logo"><img src="images/logo.jpg" width="335" height="74" alt=""></div>
        					<div class="logo2"><img src="images/cash4aCLAIM_09.jpg" width="241" height="68" alt=""></div>
                            <div class="navbar">
  									<ul>
        								<li><a href="index.php" class="nav">Home</a></li> 
           								<li><a href="claim.php" class="nav">Claim Now</a></li>
           		 						<li><a href="services.php" class="nav">Services</a></li> 
           		 						<li><a href="testimonials.php" class="nav">Testimonials</a></li>
            							<li><a href="about.php" class="nav">About Us</a></li>
            							<li><a href="contact.php" class="nav">Contact</a></li>
            							<li><a href="blog.php" class="nav">Blog</a></li>
        							</ul>
  							</div>
					</div>
    				<!-- END HEADER -->
    
    				<!-- START BODY -->
  					<div class="body">
							<div class="navarea"></div>
                            
                       		<!--START CONTENT -->    
							<div class="content">
                           		<div class="contentleft"></div>
					  			<div class="contentright">
                                	         			 			<img src="images/cash4aCLAIM_38.jpg" width="227" height="32">
            <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('MenuButton5','','Rollover/images/rollover_41.jpg',1)"><img src="images/cash4aCLAIM_41.jpg" alt="claim now" 		name="MenuButton5" width="227" height="83" border="0"></a>
            						<img src="images/cash4aCLAIM_43.jpg" width="227" height="32">
						  		</div>
                			</div>
                        	<!--END CONTENT-->
                        
                    		<!-- START FOOTER -->    
							<div class="footermain">
            					<div class="footerdivider"></div>
    								<div class="footerleft"></div>
 					       			<div class="footerright">
        		 					 					<p class="copyright"><a href="home.php" class="footer">Home</a> | 
                                     					<a href="claim.php"class="footer">Claim Now</a> | 
                                                        <a href="faq.php"class="footer">FAQ</a> | 
                                                        <a href="about.php"class="footer">About</a> | 
                                                        <a href="contact.php"class="footer">Contact</a> | 
                                                        <a href="legal.php"class="footer">Legal Notice</a> | 
                                                        <a href="http://www.webexposure.co.uk"class="footer">SEO Design</a><br>
        		    									Copyright © cash4aCLAIM.com 2010 | Web Exposure Design</p>
  			  						</div>
                				<div class="footerdisclaimer"><p class="disclaimer">*Payment made only upon successful conclusion of your claim following the verification and commencement of action against a third party insurer/organisation/individual leading to payment of compensation. We will then pay you up to an additional &pound;200 for using cash4aclaim as your legal representative.</p>
                				</div>
   							</div>
                            <!--END FOOTER-->
  					</div>
                    <!--END BODY-->
<!--END MAIN-->
</div>

And all the CSS for my DIVs

.main  {width:950px; padding:0; margin:0 auto;box-shadow: 5px 5px 5px 5px #ccc;-moz-box-shadow: 5px 5px 5px 5px #ccc;-webkit-box-shadow: 5px 5px 5px 5px#ccc;border:5px solid;float:left;}

.header {margin:0 auto;text-align:left;width:100%;margin-bottom:3px;}
	.logo { float: left; padding:0 0 15px 15px; margin:0; width:50%;}
	.logo2{ float: right; padding:0 0 0 0; margin:0; width:45%;text-align:right;}

.body { width:100%; margin:0 auto; padding:0 0 0 0;}
	.navbar {margin:0 0;background:#6499c1;float:left;width:100%;height:30px;text-align:center;vertical-align:middle;white-space:normal;overflow:hidden;}
	.navarea{width:100%;float:left; height:99px;background:#ffffff;}		/*background-image:url('images/cash4aCLAIM_15.jpg');background-repeat:no-repeat;*/	

.content{width: 100%;float:left;background:#ffffff;}
	.contentleft{width:75%;float:left;padding: 5px 3px 0px 5px}
	.contentright{width:25%;float:right;padding: 5px 3px 0px 5px}
.footermain{width:100%;float:left;}
	.footerdivider{width:100%;background:#6499c1;height:3px;}
	.footerleft{width:40%;float:left;}
	.footerright{width:60%;float:right;text-align:center;}
	.footerdisclaimer{width:100%;float:left;}	

add overflow:auto; to the main container, instead of floating it and that should do it.

Hope I have helped. :slight_smile:

Yeah that did it, thank you very much. Such a silly problem solved so easily.

Thought I’d use this, I didn’t want to keep filling the forum with my topics and its along the same line.

I’m trying to now make my design cross browser compliant and as part of that I’m trying to use the filter for IE to render a drop shadow around my page as I’ve done in Chrome and Firefox but for whatever reason, apart from IE sucking, it applies the dropshadow to the objects WITHIN the DIV rather than the DIV itself :frowning:

The site is here: http://workclaims.mediaxombie.com

Not sure what code would be useful to post so hope this is helpful

My Div CSS


/*//////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////DIVs 
////////////////////////////////////////////////////////////////////
*/
.shell {width:950px; padding:0; margin:0px auto;text-align: left;}
.main  {width:100%; padding:0 ; margin:0 auto;overflow:auto;
		box-shadow: 0px 0px 5px 5px #ccc;
		-moz-box-shadow: 0px 0px 5px 5px #ccc;
		-webkit-box-shadow: 0px 0px 5px 5px#ccc;
		filter: 
        progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=7)
        progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
        progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
        progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=7);
}

		}

.header {text-align:left;width:100%;}
	.logo { float: left; padding:10px 0 15px 15px; width:45%;}
	.logo2{ float: right; padding:10px 9px 0 0; width:34%}

.body { width:100%; margin:0 auto; padding:0 0 0 0;}
	.navbar {margin:0 0;background:#6499c1;float:left;width:100%;height:30px;text-align:center;vertical-align:middle;white-space:normal;overflow:hidden;}
	.navarea{width:100%;float:left; height:107px;background:#ffffff;background-image:url('images/banner4.jpg');background-repeat:no-repeat;}		/*background-image:url('images/cash4aCLAIM_15.jpg');background-repeat:no-repeat;*/	

.content{width: 100%;float:left;background:#ffffff;padding: 5px 0 0 0;}
	.contentleft{width:72%;float:left;padding: 0 0 10px 5px;}
		.contentleftshell{width:100%;padding: 0 0 0 0;}
		.contentleftheader{width:100%;background:#6499c1;}
		.contentleftdetail{width:100%;background:#ffffff;}
	.contentright{width:25%;float:right;padding: 0 3px 5px 3px;text-align:right;background:#fff;}
		.contentrightheader{width:100%;background:#6499c1;}
		.contentrightdetail{width:100%;padding:1em 0 1.5em 0;text-align:center;}
			.claimamount{width:100%;overflow:hidden;}
				.claimamountleft{width:50%;height:40px;float:left;background:#ffffff;}
					.claimamountleftalt{width:50%;height:40px;float:left;background:#1185fc;white-space:normal;}
				.claimamountright{width:50%;height:40px;float:left;background:#ffffff;}
					.claimamountrightalt{width:50%;height:40px;float:left;background:#1185fc;white-space:normal;}
.footermain{width:100%;float:left;display:inline;}
	.footerdivider{width:100%;background:#6499c1;height:3px;float:left;}
	.footerleft{width:50%;float:left;}
	.footerright{width:50%;float:right;text-align:center;}
	.footerdisclaimer{width:100%;float:left;}	

and my html

<html>
<head>

<title><?php if(isset($title)) { echo $title; } else { echo "Make a claim today!"; } ?> | Cash4aCLAIM.com</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta content="Accident claims designed to get you compensation" name="title"/>
<meta  name="description" content="<?php if(isset($description)) { echo $description; } else { echo "cash4aClaim are legal representatives who aim to secure you financial compensation for injuries that were not your fault and you keep 100% of the compensation!"; } ?>"/>
<meta  name="keywords" content="<?php if(isset($keywords)) { echo $keywords; } else { echo "Injury Solicitors, No Win No Fee, Accident Claim Solicitors, Personal Injury Claims, Work Accident Compensation, Whiplash Claim, accident claims solicitor, accident claims solicitors, no win fee, no win no fee accident, no win no fee accident claim,  no win no fee accident claims, no win no fee claim, no win no fee claims, no win no fee compensation, no win no fee compensation claim, no win no fee injury, no win no fee lawyers, no win no fee solicitor, no win no fee solicitors, no win no fee uk, personel injury claims, claim compensation for whiplash, claim for whiplash, claims for whiplash, whiplash claims, whiplash compensation claim, whiplash injury claim, whiplash injury claims, work accident compensation claim"; } ?>" />

<link href="style.css" rel="stylesheet" type="text/css" />

<?php //error handler function
function customError($errno, $errstr)
  {
  echo "<b>Error:</b> [$errno] $errstr<br />";
  echo "<b>Error:</b> [$errno] $errstr<br />";
  echo "Webmaster has been notified";
  error_log("Error: [$errno] $errstr",1,
  $technicalfaultmail,"From: siteerror@cash4aclaim.com");
  }

//set error handler
set_error_handler("customError",E_ALL|E_STRICT);
?>
<!--[if IE]>
<style type="text/css" media="screen">
.main  {width:100%; padding:0 ; margin:0 auto;overflow:auto;
}
body{
	background-color:#FFFFFF;
	padding-top:15px;
	padding-bottom:0;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif; /*Tahoma,*/
	line-height: 150%;
	letter-spacing:0px;
	font-size:0.70em;
	font-weight:normal;
	color:#777;
	white-space:normal;
	}	
    
</style>
<![endif]-->

<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {
    alert(alerttxt);return false;
    }
  else
    {
    return true;
    }
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(callbackname,"Please provide a contact name!")==false)
  {callbackname.focus();return false;}	  
  if (validate_required(callbackno,"Please provide a contact number!")==false)
  {callbackno.focus();return false;}
  }
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body>

<!--START MAIN-->
<div class="shell">
  <div class="main">
					<!-- START HEADER -->
					<div class="header">
       						<div class="logo"><a href="index.php"><img src="images/logo.jpg" width="335" height="74" alt="cash4aCLAIM.com"></a></div>
        					<div class="logo2">
                            	<!-- CALL BACK FORM -->
                                <form method='post' action='callbackthankyou.php' id="callbackform" class='formmini' onsubmit='return validate_form(this)'>
 								  <label for='callbackname' class='labelmini'>Name:</label><input type='text' name='callbackname' class='fieldsmini' maxlength='25' /><br />
 								  <label for='callbackno' class='labelmini'>Contact Number:</label><input type='text' name='callbackno' class='fieldsmini' maxlength='11'  /><br />
								  <input type='submit' name='callbacksubmitted' value='Call Me Back' class='buttonsmini'/>
								</form>
                            </div>
                            <div class="navbar">
  									<ul>
        								<li><a href="index.php" class="nav">Home</a></li> 
           								<li><a href="claim.php" class="nav">Claim Now</a></li>
           		 						<li><a href="services.php" class="nav">Services</a></li> 
           		 						<li><a href="testimonials.php" class="nav">Testimonials</a></li>
            							<li><a href="about.php" class="nav">About Us</a></li>
            							<li><a href="contact.php" class="nav">Contact</a></li>
            							<li><a href="#" class="nav">Blog</a></li>
        							</ul>
  							</div>
					</div>
    				<!-- END HEADER -->
    
    				<!-- START BODY -->
	<div class="body">
							<div class="navarea"></div>
                            
                       		<!--START CONTENT -->    
							<div class="content">
                            	<!--CONTENT LEFT --> 
                   		  	  <div class="contentleft">
<!--*****************************ALL CONTENT GOES BELOW*********************************************************************************************************************************** ****************************************************************************************************************************************************************************************** -->
                                	<div class="contentleftshell">
                                   	  <div class="contentleftheader"><p class="contentheader">no win no fee solicitors</p></div>
                                   	  <div class="contentleftdetail"><p class="contentdetails">Make a claim today with cash4aCLAIM and you will be getting the best legal compensation service at NO COST!  That's right, cash4aCLAIM are trained legal professionals who offer you:<br/>
                                       	<p class='contentemphasis'><img src="images/sub_nav.gif"></img>100% of your compensation, <strong>GUARANTEED</strong>.<br>
										<img src="images/sub_nav.gif"></img><strong>£200* BONUS CASH</strong> on top of any compensation paid, just for using us!<br>
                                        <img src="images/sub_nav.gif"></img>All costs recovered from the other side!</p>
                                       </div>
                                      <div class="contentleftheader"><p class="contentheader">something, something, something dark side</p></div>
                                   	  <div class="contentleftdetail"><p class="contentdetails">Make a claim 
                                       </div>
                                  </div>
<!--*****************************ALL CONTENT GOES ABOVE*********************************************************************************************************************************** ****************************************************************************************************************************************************************************************** -->					  			                              
                               </div>
                                <!--CONTENT RIGHT --> 
                                <div class="contentright">
                               	  <div class="contentrightheader"><p class="sidebarheader">What is my claim worth?</p></div>
                                  		<div class="contentrightdetail">
                                        			<div class="claimamount">
                                                    		<div class="claimamountleft"><p class="claimtext">Ankle Injuries</p></div><div class="claimamountright"><p class="claimtext">Up to £32,000</p></div>
                                                    		<div class="claimamountleftalt"><p class="claimtextalt">Knee Injuries</p></div><div class="claimamountrightalt"><p class="claimtextalt"> Up to £61,500</p></div>
                                                    		<div class="claimamountleft"><p class="claimtext">Neck Injuries</p></div><div class="claimamountright"><p class="claimtext">Up to £95,000</p></div>
                                                    		<div class="claimamountleftalt"><p class="claimtextalt">Back Injuries</p></div><div class="claimamountrightalt"><p class="claimtextalt">Up to £108,000</p></div>
                                                    		<div class="claimamountleft"><p class="claimtext">Hand Injuries</p></div><div class="claimamountright"><p class="claimtext">Up to £129,000</p></div>
                                                    		<div class="claimamountleftalt"><p class="claimtextalt">Paralysis</p></div><div class="claimamountrightalt"><p class="claimtextalt">Up to £257,750</p></div>
                                                            <p class="disclaimer">Compensation amounts extracted from JSB version 9.  Total amount depends on severity of injury.</p>
                                                     </div>
                                        </div>
                                  
                                   
                               <div class="contentrightdetail">   <a href="claim.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('MenuButton5','','images/claimbuttonRoll.gif',1)"><img src="images/claimbutton.gif" alt="claim now" 		name="MenuButton5" width="220" height="78" border="0"></a></div>
 
                      <div class="contentrightheader"><p class="sidebarheader">Testimonials</p></div>
                                    	<p class="testimonials">"Cash4aClaim dealt with my claim quickly and with no effort on my end...  I was able to get £3,534 in compensation for my injury plus the additional £200 bonus money so I was very happy with how the staff handled my claim.  I would definitely go to them in the future if I ever needed to claim again, though hopefully that won't be happening.  Thanks cash4aClaim."</p><b>~Dr. V., Oldham</b>
                                        
                     
                                
           			  </div>
                      </div>
                      
							<div class="footermain">
            					<div class="footerdivider"></div>
    								<div class="footerleft"></div>
 					       			<div class="footerright">
				 					  <p class="copyright"><a href="home.php" class="footer">Home</a> | 
                                     					<a href="claim.php"class="footer">Claim Now</a> | 
                                                        <a href="faq.php"class="footer">FAQ</a> | 
                                                        <a href="about.php"class="footer">About</a> | 
                                                        <a href="contact.php"class="footer">Contact</a> | 
                                                        <a href="legal.php"class="footer">Legal Notice</a> | 
                                                        <a href="http://www.webexposure.co.uk"class="footer">SEO Design</a><br>
        		    									Copyright © cash4aCLAIM.com 2010 | Web Exposure Design</p>
  			  						</div>

       				  </div>
    </div>
    
   <!--END BODY-->                         
  </div>
  <div class="footerdisclaimer"><p class="disclaimer">*Payment made only upon successful conclusion of your claim following the verification and commencement of action against a third party insurer/organisation/individual leading to payment of compensation. We will then pay you up to an additional &pound;200 for using cash4aclaim as your legal representative.</p>
  					</div>
                    
<!--END SHELL-->
</div>


<!-- End Save for Web Slices -->
</body>
</html>