Hello people,
Can somebody please take a look at this page. Am trying to have this 2 floated divs in a containg div. I want the containing div to have white BG while d nested divs are transparent. But somehow d nested divs floats just fine without the containing div "containing" them. I don't know where am getting it wrong but I know am missing some. can somebody help me figure it out please??

Heres's my HTML
<div id="frame">
<div id="sidecol">
<ul>
<li>The Foundation</li>
        <li>Mission</li>
        <li>Inspiration</li>
        <li><a href="#">Management</a></li>
</ul></div>
<div id="main">
,
</div>
</div>

the CSS
#frame
{
background:#000;
font: 11px/1.5 Arial, Helvetica, sans-serif;
width: inherit;
}


#sidecol {width: 150px;
margin-right:15px;
height:auto;
float:left;
}

#sidecol ul {color:#f60;
                 list-style: none;
                 line-height:3em;
                 text-indent:-2em;
                 margin-top:0;
                 }

#main {width: 600px;
border-left: 1px solid #999;
float: left;
background:#fff;
}

You can preview it here  http://on.nigautoguide.com/about.html

Caramba! someone please help this guy. . .

*dhtml:

Caramba! someone please help this guy. . .

dhtml, no be like wia person see christ e come refer am to hospital? Abeg, oga mi, at thy word I know say d proble go fix itsef, abeg. wetin dey wori me or the code? I wan dey like u wen I grow up.

HTML

<div id="frame">
<div id="sidecol">
<ul>
<li>The Foundation</li>
<li>Mission</li>
<li>Inspiration</li>
<li><a href="#">Management</a></li>
</ul></div>
<div id="main">
,
</div>
<div class="clear"></div>
</div>



CSS


.clear{
clear:both;
}

#frame
{
background:#000;
font: 11px/1.5 Arial, Helvetica, sans-serif;
width: inherit;
}


#sidecol {width: 150px;
margin-right:15px;
height:auto;
float:left;
}

#sidecol ul {color:#f60;
list-style: none;
line-height:3em;
text-indent:-2em;
margin-top:0;
}

#main {width: 600px;
border-left: 1px solid #999;
float: left;
background:#fff;

}

another solution.

No changes to your original HTML in your first post, just the CSS. Look at the change in bold.



CSS
#frame   
      {
      background:#000;
      font: 11px/1.5 Arial, Helvetica, sans-serif;
      width: inherit;
      }


#sidecol   {width: 150px;
      margin-right:15px;
      height:auto;
      float:left;
      }

#sidecol ul {color:#f60;
                 list-style: none;
                 line-height:3em;
                 text-indent:-2em;
                 margin-top:0;
                 }         

#main   {width: 600px;
      border-left: 1px solid #999;
      float: left;
clear:right;
      background:#fff;

      }

The containing DIV has not height parameter set. You will need to set the height to auto and an Overflow to hidden. Your #frame should look like this:

#frame    
     {
     background:#000;
     font: 11px/1.5 Arial, Helvetica, sans-serif;
     width: inherit;
     height: auto;
     overflow: hidden;
     }


Also note, when you are floating a div, you should also clear the float, else the entire placement of elements will be distorted by the float.

Hope this help?

Naija, great nation, wooonderful people.

@Dual, I_want_to, you've giving me a headstart for the week. Thanks so much. Ok, i tried adding padding to the containin div and it ovaflows. How do i fix that? Actually, am trying to model my page exactly after this one
http://www.skollfoundation.org/about/mission/

To achieve the page structure as skollfoundation.org, you will need to have a measured div elements.

The main containing DIV must have a defined width. Every other elements should also have their width defined. Note that adding a padding to the element increases its height and width measurement.

Ok. Thanks. So far am getting better result with your advice. But, I notice IE doesn't display the shadow effect whereas it comes out cool in chrome and FF. Any idea why that is?

Here's what I have used

.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}

Your above code won't work in IE because:

1) Anything less than IE8 does not support CSS3, and
2) IE9 is barely scratching the surface, with respect to supporting CSS3

So what can you do?
1) Either practice "graceful degradation" where the page looks good in all compliant browsers but looks "the normal way" in non-compliant browsers, OR

2) You add an IE-specific rule to your rule above like so:
FILTER: DropShadow(Color=#0066cc, OffX=5, OffY=-3, Positive=1);

good luck!

yawa-ti-de:

Your above code won't work in IE because:

1) Anything less than IE8 does not support CSS3, and
2) IE9 is barely scratching the surface, with respect to supporting CSS3

So what can you do?
1) Either practice "graceful degradation" where the page looks good in all compliant browsers but looks "the normal way" in non-compliant browsers, OR

2) You add an IE-specific rule to your rule above like so:
FILTER: DropShadow(Color=#0066cc, OffX=5, OffY=-3, Positive=1);

good luck!

I applied the above code and removed it as fast as I put it. I guess my luck didnt work.
But again, I've tried looking through the source code of the page http://www.skollfoundation.org/about/mission/ which is what am trying to model but I got dizzy from the page and couldn't figure where the shadow effect was applied. Now I wonder how they achieve the "imageless" shadow effect for IE.