Border shadow does not reflect... CSS probs!

Hi again!

So this is happening again, the second time. I tried to modify it based on a previous post with a similar issue, but this won't work.

The website is http://www.mombasajamaat.org/index-beta.php

The code is:


/* ---------------- general ---------------- */

div#page-container {
width:100%;
margin:auto;
}

html, body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:1.5em;
vertical-align:middle;
margin: 0;
padding: 0;
}

/* ---------------- typography ---------------- */

a:link {
color:#666666;
text-decoration:none; }
a:visited {
color:#666666;
text-decoration:none; }
a:hover {
color:#FF3300;
text-shadow:#FF3300;
text-decoration:none; }
a:active {
color:#666666;
text-decoration:none; }

/* ---------------- topbar for messages, twitter, facebook, and linkedIn ---------------- */

div#topbarwrapper {
position:relative;
background:#181e5a;
width:100%;
height:45px;
/* background-image:-moz-linear-gradient(#d5d5d5, #ffffff);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d5d5d5), to(#ffffff));
filter:progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#d5d5d5, endColorstr=#ffffff); */
}

#topbarcontainer {
margin:auto;
width:1000px;
background:#181e5a;
height:44px;
}

#topbarcontainer .topbarcontainer {
float:right;
margin-right:20px;
}
/* ---------------- HEADER SECTION ---------------- */

div#headerwrapper {
height: 200px;
width:100%;
margin:auto;
border-bottom:#181e5a thick solid;
background-image:-moz-linear-gradient(#d5d5d5, #ffffff);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d5d5d5), to(#ffffff));
filter:progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#d5d5d5, endColorstr=#ffffff);
}

div#header {
position:relative;
width:1000px;
height:200px;
margin:0 auto;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#CCCCCC;
background-image:url(../img/header_bg.png);
background-repeat:no-repeat;
background-position:center;
}

div#header .menu {
float:right;
right:20px;
top:40px;
}

div#header .headerbox {
position:relative;
width:1000px;
margin:auto;
}

.logo {
position:absolute;
line-height:1.2em;
left:20px;
top:20px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:30px;
color:#181e5a;
}

.logofontsmall {
font-size:24px;
font-variant:small-caps;
font-stretch:extra-expanded;
color:#666666;
}

/* ---------------- MAIN PAGE / CONTENT ---------------- */

#bodywrapper {
width:100%;
}

#content {
width:1000px;
background-color:#FFFFFF;
margin:auto;
text-align:left;
-moz-box-shadow:0px 20px 20px #d5d5d5;
-webkit-box-shadow:0px 20px 20px #d5d5d5;
box-shadow:0px 20px 20px #d5d5d5;
}

#contentright {
margin-top:10px;
margin-bottom:25px;
width:730px;
background-color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
float:right;
text-align:justify;
line-height:1.8em;
min-height:100%;
}

#contentright .padding{
padding:5px 5px 25px 5px;
}

#contentleft {
width:250px;
background-color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
float:left;
margin:auto;
}

#contentleft .padding{
padding:5px 5px 25px 5px;
}
/* ---------------- FOOTER ---------------- */

div.stripe{
height:10px;
border-bottom:1px solid #/*370045*/ffffff;
border-top:1px solid #ffffff;
background-color:#181e5a;
/* background-image:-moz-linear-gradient(#181e5a, #500000);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#181e5a), to(#500000));
filter:progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#181e5a, endColorstr=#500000); */
}

#footer {
clear:both;
padding-top:3px;
height:100px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
text-align:center;
background-color:#444444;
}

/* ---------------- MY BOXES MENU ---------------- */
.mybox .title {
position:relative;
font-family:Arial, Helvetica, sans-serif;
text-indent:10px;
top:50%;
color:#181e5a;
font-size:18px;
height:32px;
margin-bottom:10px;
/* border:#CCCCCC thin solid;
-moz-border-radius: 10px 20px 2px 6px;
-webkit-border-radius: 10px 20px 2px 6px;
border-radius: 10px 20px 2px 6px; */
}

.mybox {
position:relative;
width:220px;
min-height:110px;
color:#666666;
margin-top:10px;
margin-left:auto;
margin-right:auto;
margin-bottom:25px;
padding-top:10px;
}

.mybox .title .img{
height:32px;
float:left;
}

/* ---------------- general ---------------- */

.myimage-left {
margin:0px 10px 25px 10px;
float:left;
}

.myimage-right {
margin:0px 10px 25px 10px;
float:right;
}

h1 {
margin:0;
color:#666666;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
line-height:1.8em;
}

h2 {
margin:0;
color:#666666;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:20px;
line-height:1.8em;
}

h3 {
margin:0;
color:#666666;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:17px;
line-height:1.8em;
}

.divider{
border-top: #999999 solid thin;
}

#committee-box {
margin:25px 0 0 25px;
}

#committee-box .title {
font-family:"Trebuchet MS";
font-size:12px;
text-align:right;
padding-right:10px;
padding-top:1px;
width:150px;
float:left;
}

#committee-box .name {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
text-align:left;
padding-left:10px;
width:150px;
float:left;
}

#committee-box .contact {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
text-align:left;
padding-left:10px;
width:150px;
float:left;
}

.center {
text-align:center;
margin:auto;



What I really need is the center part of the main content to get the border-shadow effect, and even though the attributes are there, it just won;t show. Where did I go wrong with the code? Please helP!

And if you do tell me where the problem is, kindly give me just a brief on why it wouldn't work before :) I really am learning this on my own.

you see, when you float two objects (#contentleft & #contentright), you are taking them out of the flow of the page. in this sense, they do not exist anymore. therefore the parent (#content) becomes a height of 0. That's why you can't see the shadow, because the shadow was on (#content), which has a height of 0. By using clear: both; after the two floats, you are bringing BOTH the floated objects (#contentleft & #contentright) space back on the page. If you wanted only one height to be taken into account, you could clear just one with clear: left; or clear: right;. If you have 3 or more floated objects, you can bring them all back with clear: all;. Now you may be thinking, so I have to clear the floats everytime I want to float? Nope. If (#content) is a SET height (say 900px), then you can just set #content { height: 900px; }, therefore although the floats don't take up any room, the parent (#content) is 900px instead of 0. Hopes this makes sense!

height: 0;
http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-91.png

cleared, height is once again dependent on the height of the greatest floated object
http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-90.png

Hello mnkhaki,
I'm not sure what clear: all; will do for you. I'm not a big fan of adding an element for the sole purpose of clearing when there are often other methods available.

See about the clear property here (http://www.w3schools.com/cssref/pr_class_clear.asp).

See this explanation of how overflow: auto; clears your floats (http://www.quirksmode.org/css/clearing.html).

you see, when you float two objects (#contentleft & #contentright), you are taking them out of the flow of the page. in this sense, they do not exist anymore. therefore the parent (#content) becomes a height of 0. That's why you can't see the shadow, because the shadow was on (#content), which has a height of 0. By using clear: both; after the two floats, you are bringing BOTH the floated objects (#contentleft & #contentright) space back on the page. If you wanted only one height to be taken into account, you could clear just one with clear: left; or clear: right;. If you have 3 or more floated objects, you can bring them all back with clear: all;. Now you may be thinking, so I have to clear the floats everytime I want to float? Nope. If (#content) is a SET height (say 900px), then you can just set #content { height: 900px; }, therefore although the floats don't take up any room, the parent (#content) is 900px instead of 0. Hopes this makes sense!


No wonder - before I had it at a min-height of 600px and the shadow was there. When I removed it, the shadow went.. makes sense.

Hello mnkhaki,
I'm not sure what clear: all; will do for you. I'm not a big fan of adding an element for the sole purpose of clearing when there are often other methods available.


Thanks for your response - what would you suggest? Is there a way to have content left & right within the entire content itself without clearing? I will be making one more site soon and this will help me focus on what NOT to do when I start the next project.

cleared, height is once again dependent on the height of the greatest floated object
http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-90.png

Sammy - I used <div style="clear:both;"></div> as you suggested to test it out - but it didn't work. It's still there... so, is there something else causing it?

Thanks for your response - what would you suggest?

Check out that overflow: auto; method of clearing floats. See the link in my first reply.

Check out that overflow: auto; method of clearing floats. See the link in my first reply.

Thank you!! -I just did and it worked like a charm :)

I'm beginning to have faith back in CSS :D