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>
<br />
<br />
<asp:Panel ID="Panel1" runat="server" BackColor="White" Width="20%">
<asp:Label ID="Label1" runat="server" Font-Bold="True"
ForeColor="Black" Text="Author" Font-Names="Arial"></asp:Label>
<asp:HyperLink
ID="author_link" runat="server" Font-Underline="True" ForeColor="#000066">[author_link]</asp:HyperLink>
<br />
<asp:Label ID="Label2" runat="server" Font-Bold="True" ForeColor="Black"
Text="Technology"></asp:Label>
<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">
<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 wher开发者_如何学JAVAe 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.
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>
精彩评论