How to fix 2 DIVs side by side
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
精彩评论