求教一个css的问题

HTML code

  <div class="page">        <div id="header">            <div id="title">                <h1>Welcome to my blog</h1>            </div>                          <div id="logindisplay">                <% Html.RenderPartial("LogOnUserControl"); %>            </div>                         <div id="menucontainer">          <% Html.RenderPartial("UserMenuControl"); %>            </div>        </div>        <div class="main">            <asp:ContentPlaceHolder ID="MainContent" runat="server" />            <div id="footer">            </div>        </div>    </div>

上面是代码
下边是css

CSS code

.page{    width: 90%;    margin-left: auto;    margin-right: auto;}#header{    position: relative;    margin-bottom: 0px;    color: #000;    padding: 0;}div#title{    display:block;    float:left;    text-align:left;}#logindisplay{    font-size:1.1em;    display:block;    text-align:right;    margin:10px;    color:White;}#menucontainer{    margin-top:40px;   }

我就是想问下<div id="title"> 在 <div id="logindisplay"> 的上面，为什么页面出现的效果是 <div id="logindisplay"> 在上面
#logindisplay
{
font-size:1.1em;
display:block;
text-align:right;
margin:10px;
color:White;
}
如果 margin:10px; 是相对定位的话，那么id为logindisplay的应该在title的下边间隔为10才对啊， ，，，

[解决办法]
#logindisplay
{
font-size:1.1em;
display:block;
text-align:right;
margin:10px;
color:White;
clear:both;
}


楼主 试试
[解决办法]
title 使用了float 脱离了文本流
logindisplay就跑上去了。
[解决办法]
float:left的原因，给#logindisplay样式加一个clear:both;清楚浮动的样式
[解决办法]
楼上的都是正解.
[解决办法]

探讨

float:left的原因，给#logindisplay样式加一个clear:both;清楚浮动的样式

[解决办法]
title 使用了float 脱离了文本流 ，不在尊顺原来的文本流布局了，只是以父级为基础定位， 而其他的子级依然按照原来的文本流布局...这样
logindisplay 就占据了原来的title所在的位置，...logindisplay就跑上去了
[解决办法]
建议了解一下浮动，文档流。。
[解决办法]
一：你的title层加了样式float:left;导致第二个层紧排在他的右边。

二：那是因为<h1>是自带margin值的，导致左边层离顶部空间加大，只是离顶部距离大于右边离顶部的距离而已


so easy