CSS Float右不工作

Question

我是网页设计新手，在使用 asp.net 页面和使用 CSS 时遇到问题。我的问题是我希望我的网站结构是这样的。

标题-----------------

导航栏|内容

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

页脚-----------------

而且我的一般设计工作但是当我有很长的内容页面时，即使它位于浮动：右 div 如果它比我的导航栏长，它会出现在它下面。所以我得到类似

标题-----------------

导航栏|内容

............ |内容

|内容

|...

页脚-----------------

我不想要的，我是否错过了一些重要的标签/概念，下面是我的 CSS 和页面代码。

    <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 />
        <asp: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;
      }

Answer 1

好吧，我遇到了与您类似的问题。我建议你阅读这篇文章。

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

阅读一下，它会清除一些概念..如果你不喜欢右侧的div..删除它..