CSS Float right not working

I am new to web design and am having a problem with an asp.net page and using CSS. My problem is that I want a structure of my website to be like this.

Header-----------------

NavBar| Content

............|......

Footer-----------------

And I have the general design working however when I have a long page of content even though it is in a float:right div if it is longer than my nav bar, it appears under it. So I get something like

Header-----------------

NavBar| Content

........... |Content

|Content

|...

Footer-----------------

Which I don't want, am I missing some important tag/concept about this, below is my code for the CSS and page.

    <form id="masterForm" runat="server" >

<div id="container" > 
      <div id="header"><br />        
        <h1>Simon & Cats Travel Blog</h1> 
      </div>

      <div id="sidebar">             
        <asp:SiteMapDataSource ID="web" runat="server" />     
        <asp:TreeView ID="siteTreeView" runat="server" DataSourceID="web" ImageSet="Arrows" >
        </asp:TreeView>


        <div >            
            <asp:LoginView ID="loginView" runat="server">             
            <AnonymousTemplate>
            </AnonymousTemplate>
            <LoggedInTemplate >
            </asp:LoginView>

        </div>
      </div>

      <div id="content" runat="server" > 
        <br />
        <a开发者_开发技巧sp:SiteMapPath ID="siteBreadcrumb" runat="server">
        </asp:SiteMapPath>  
        <br />    
            <asp:ContentPlaceHolder ID="HeaderSectionContent" runat="server" >   
            </asp:ContentPlaceHolder>            
      </div>

      <div id="footer" >                       
      </div>
</div>  

</form>


    body {
background-color: #4a2A00;
font-family: verdana,arial,serif;
font-size: 0.9em;
margin-bottom: 20px;
margin-top: 20px;
text-align: center;
    }
container {
    width:85%;  
    color: #000000;
    text-align: left;
    top: 0px;
    left: 0px;
    background-color: #F5BF7A ;
      }

header{
    margin-bottom: 10px;
    background: url(banner.jpg) no-repeat;
    height: 140px;
    width: 100%;
      }

sidebar{
    float: left;
    width: 25%;
    margin-left: 1%;
    display: inline;
      }

content{
    float: right;
    width: 68%;
    margin-left: 3%;
    background-color : White ;
      }

footer{
    clear: both;
    color: #000000;
    background-color : White ;
    text-align: right;
    font-size: 0.7em;
      }

Well I have come across an issue similar to yours. I suggest you read this article.

http://www.winstonprakash.com/articles/netbeans/FixedPageLayout.html.

Take a read and it will clear some concepts.. If you dont like the right side div..remove it..