为什么在调整左侧div时,div内的右侧表会移动?

时间:2014-09-10 07:24:39

标签: css asp.net html5 split

我有一个包含一个内容占位符的页面。我需要将数据显示为整个页面的两个单独列。我尝试用div分裂的想法,但没有锻炼。我试过的代码如下。

    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="GVKUI.WebForm1" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <style type="text/css">
        #header,#footer {
            min-height:40px;
        }
        #main-wrap {
            height: 412px;
            width: 335px;
        }
        #sidebar {
            float:left;
            width:50px;
            height:162px;
        }
        #content-wrap {

            float:right;
            width:50px;
            height: 367px;
            width:117px;
            margin-left: 545px;

        }

    </style>

<div  id="header">
     Header
     <br />
</div>
<div id="main-wrap">
    <div(sidebar) id="sidebar"><br />
        <table>
            <tr>
                <td>
                    Sathiya
                </td>
           </tr>
        </table>
    </div(sidebar)>
    <div id="content-wrap">
          <table>
              <tr>
                  <td>Nandhinee</td>
              </tr>
          </table>   
    </div>
</div>
     </asp:Content>

1 个答案:

答案 0 :(得分:0)

不要向右列留下边距,即(从#content-wrap中取出这个样式边距:545px),因为你已经将其向右浮动,所以你不需要任何左边距。