[css-d] Why isn't the left column pushed down??

[Jan Erik Moström]

I'm trying to create a template and there is (at least) one 
thing that I don't understand.

An example of the template can be found at <http://www.latik.se/tmp/>


My problem is the "blue" area, the left column. When I increase 
the padding of the horizontal navbar the content area is pushed 
down but not the left column and I don't understand why. Can 
anyone tell me why this happen?

The relevant (I think) parts of the CSS and HTML files look like this
-------------------------------------------------
#pagebar
{
     padding: 3px 5px 10px 5px;
     width: 100%;
}

#pagebar ul
{
     background-color: red;
     display: inline;
     list-style: none;
     float: left;
     margin: 0px;
     padding: 0px;
}

#pagebar li
{
     border-right: 2px solid #fff;
     display: inline;
     padding: 0px;
     margin: 0px;
}

#leftcolumn
{
     background-color: #3FF;
     width: 150px;
     float: left;
     margin: 0px;
     padding: 0px;
}
--------------------------------------------------

     <div id="page">
         ...
         <div id="pagebar">
             <ul>
                 <li>One</li>
                 <li>Two</li>
             </ul>

         </div>
         <div style="clear:both"></div>
         <div id="leftcolumn">
             <h1>Lorem ipsum dolor</h1>
             <ul>
                 <li>One</li>
                 <li>Two</li>
             </ul>

         </div>
         <div id="pagecontent">
             <p>Lorem ipsum dolor sit ...
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/