Question

I want to create two div tags such that,they should be empty.I wanted to leave 20% width on both of the sidebars but has no content as of now to fill.

I wanted to have the main content div as 60% of the page width.

I have tried using the css but it is not working for me till now.
Here is my css code:

/* Sidebar */

#sidebar-left {
    float: left;
    width: 200px;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    color: #000000;
    border-color:Black;
}
#sidebar-right {
    float: right;
    width: 20%;
    margin: 0px;
    padding: 0px 20px 0px 0px;
    color: #FFFFFF;
}


#content {
    float: inherit;
    width: 60%;
    padding-left:inherit;
    padding: 0px 0px 0px 0px;
    position:relative;
}

And this is my code of aspx page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="article_content.aspx.cs" Inherits="article_content" MasterPageFile="~/Site.master" %>

<asp:content id="Content1" contentplaceholderid="ContentPlaceHolder1" runat="Server">
<div id="sidebar-left">abc</div>

<div id="content">
<br />
      <asp:Label ID="head_lbl" runat="server" Font-Bold="True" 
        Font-Size="Medium" ForeColor="Black"></asp:Label>
        &nbsp;<br />
    <br />
    <asp:Panel ID="Panel1" runat="server" BackColor="White" Width="20%">
        &nbsp;&nbsp;&nbsp;&nbsp;<asp:Label ID="Label1" runat="server" Font-Bold="True" 
            ForeColor="Black" Text="Author" Font-Names="Arial"></asp:Label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:HyperLink 
            ID="author_link" runat="server" Font-Underline="True" ForeColor="#000066">[author_link]</asp:HyperLink>
        <br />
        &nbsp;&nbsp;&nbsp;
        <asp:Label ID="Label2" runat="server" Font-Bold="True" ForeColor="Black" 
            Text="Technology"></asp:Label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Label ID="tech_lbl" runat="server" Font-Bold="True" ForeColor="#000066"></asp:Label>
    </asp:Panel>
    <br />
    <br />
    <asp:Panel ID="content_panel" runat="server" BackColor="White" Width="60%" 
        BorderColor="#9999FF" BorderStyle="None">
        &nbsp;&nbsp;
        <asp:Label ID="content_lbl" runat="server" ForeColor="Black"></asp:Label>
    </asp:Panel>
    <br />
    <div id="fb-root"></div>
<script>    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) { return; }
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
    } (document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>

<br />

<!-- Place this tag where you want the +1 button to render -->
<g:plusone annotation="inline"></g:plusone>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
    (function () {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
</script>

    <br />



    </div>

<div id="sidebar-right"></div>
    </asp:content>

I am not sure that I am doing it right but please tell me what changes I need to do.

Answer 1

Try this,

*{margin:0px;}
 #main
  {

   }      
 #left
 {
    float:left;

    width:20%;
  }
 #right
 {
    float:right;
    width:20%;
  }
#content
 {
    float:left;
    width:59%;
    border-left:1px solid black;
    border-right:1px solid black;
  }
#footer
{
 padding:5px;
 background:black;
 color:white;
}

Markup

<div id="main">
   <div id="left">Left</div>
   <div id="content">Center</div>
   <div id="right">Right</div>
   <div style="clear:both"></div>
   <div id="footer">Footer</div>
</div>