开发者

How to fix 2 DIVs side by side

开发者 https://www.devze.com 2023-04-06 00:09 出处:网络
I have 2 DIVs like below how can i place it on the page side by side and centered. Not getting any luck with the below.

I have 2 DIVs like below how can i place it on the page side by side and centered. Not getting any luck with the below. Thanks in Advance

Right now my CSS is :

#content
  {
  height: 100%;
  position:fixed;
  width:1400px;
  /*width: 1200px;  position: absolute;  top:auto;  bottom:0px;  right:0px;  left:auto; */

}


#left{
    float:left;
    width:700px;   
    position:absolute;
    top:auto;  bottom:720px;  right:700px;  left:auto; 

}

#right{
    width: 700px;
    float:right;
    position:absolute;
   top:auto;  bottom:750px;  right:-90px;  left:600; 
}


<div id="content">
            <div id="left">
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSourceScanned">
                    <AlternatingRowStyle CssClass="altrowstyle" />
                    <HeaderStyle CssClass="headerstyle" />
                    <RowStyle CssClass="rowstyle" />
                    <SelectedRowStyle BackColor="#004080" Font-Bold="True" ForeColor="Yellow" />
                    <Columns>

                    </Columns>
                </asp:GridView>

            </div>



            <div id="right">
                <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSourceMade">
                    <AlternatingRowStyle CssClass="altrowstyle" />
                    <HeaderStyle CssClass="headerstyle" />
                    <RowStyle CssClass="rowstyle" />
                    <SelectedRowStyle BackColor="#004080" Font-Bold="True" 开发者_StackOverflow社区ForeColor="Yellow" />
                    <Columns>

                    </Columns>
                </asp:GridView>
                </div>
            <div style="clear: both;">
            </div>
        </div>


Try this CSS Styles

#content
  {
  height: 100%;
  width:1400px;
  margin:0 auto;

}
#left{
    float:left;
    width:700px;   
}

#right{
    width: 700px;
    float:right;
}


Best way is :

#left{
 display:inline;
}

#right{
display:inline;
}


the only problem i saw in this code was top:auto

give top some specific distance. and for horizontal central align use text-align:center; in the left & right div

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号