Creating Empty Sidebar on left and right with specified percentage in webpage

JonahB1968

New Member
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:\[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;}\[/code\]And this is my code of aspx page:\[code\]<%@ 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 = "http://stackoverflow.com//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>\[/code\]I am not sure that I am doing it right but please tell me what changes I need to do.Thanks,Amandeep
 
Top