margin-bottom not working (help!)

[B3]

I created a style.css so I could put the actual site in it and I have

.head{
height:100px;
margin-bottom:20px;
}

and my html looks like this

<div class="container">
<div class="head span-16">
<span class="logo">
<a href="/">Site Logo</a>
</span>
</div>
</div>


but the margin-bottom:20px; doesn't work.. Nothin at all is placed
below the header when I checked with firebug for firefox.. Am I doing
this the right way? I read to create a style.css so that even if
blueprint css gets updated it doesnt mess up the actual site file..

How do I get the margin to work? and is my coding correct so far?

[adster]

I suspect this is because the head element is floated to the left and
then you have an inline element within that.

Try adding a clearing element as below. Also, the margin should likely
be 18px or 1.5em as per the default BP settings.

HTH

<div class="container">
<div class="head span-16">
<span class="logo">
<a href="/">Site Logo</a>
</span>
</div>

<div class="clear"></div>
</div>

[speedunk]

No need to include the extra div and apply the clear class... the
margin is there. The best way to test (rather than using Firebug) is
to add a div after your head div, give the new div and the head div a
background color, and you'll see that the margin works as intended.

[bthr...@gmail.com]

Thx ! instead of making the "head" a class I made it an id and it
seemed to work. Is there anywhere where I can check how exactly I'm
suppose to code sites so its how blueprintcss is suppose to be used?