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>&nbsp;|
    <asp:LinkButton ID="LinkButton4" runat="server" ForeColor="Gray" ></asp:LinkButton>&nbsp;|
    <asp:LinkButton ID="LinkButton3" runat="server" ForeColor="#FF3300" ></asp:LinkButton>&nbsp;|
    <asp:LinkButton ID="LinkButton2" runat="server" ForeColor="Gray" ></asp:LinkButton>&nbsp;|
    <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>