I want to design my web site. I have two main div, one of them "header", other "content". I want to set width property:80% and I set center for both of them. But I don't do that. Other question about header div. I uploaded an image and I want to design like this. How can I do all of them?
My CSS:
#main
{
margin:0px auto;
margin-left:50px;
margin-right:50px;
margin-top:25px;
margin-bottom:25px;
height:auto;
text-align:center;}
#content
{
width:80%;
height:auto;
margin:0px auto;
}
#header
{
width:80%;
height:100px;
top:20px;
}
#header_left
{
float:left ;
height: 100px;
text-align: center;
}
#header_right
{
margin:0px auto;
height:30px;
text-align:center;
margin-top:35px;
}
#header_social
{
float:right;
height:30px;
text-align:center;
margin-top:35px;}
My client code:
<div id="main">
<div id="content">
<div id="header">
<div id="header_left">
<asp:Image ID="Image1" runat="server" />
</div>
<div id="header_right">
<asp:LinkButton ID="LinkButton5" runat="server" ForeColor="
Gray"></asp:LinkButton> |
<asp:LinkButton ID="LinkButton4" runat="server" ForeColor="
Gray" ></asp:LinkButton> |
<asp:LinkButton ID="LinkButton3" runat="server" ForeColor="#FF3300" ></asp:LinkButton> |
<asp:LinkButton ID="LinkButton2" runat="server" ForeColor="
Gray" ></asp:LinkButton> |
<asp:LinkButton ID="LinkButton1" runat="server" ForeColor="
Gray" ></asp:LinkButton>
</div>
<div id="header_social">
<asp:ImageButton ID="ImageButton1" runat="server"/>
<asp:ImageButton ID="ImageButton2" runat="server"/>
</div>
</div>
******CONTENT FIELD*****
</div>
</div>
