Looking to revamp my website design. I have two main divs - "header" and "content". The goal is to set the width property to 80% and center both of them. However, I'm facing some challenges with achieving this setup. Additionally, I need assistance with designing the header div to include an uploaded image. How can I achieve all these tasks successfully?
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;
}
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>