我正在尝试设置一个不会停留在页面右侧的正确列。我希望它坐在主要内容的右侧
这是我的Asp.net代码
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<title>Youthpodcast</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
width: 873px;
height: 155px;
}
</style>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header"> <div class="title">
</div>
<div id="logo"><img alt="" class="style1" src="logo.jpg" /><br /></div>
<br />
<br />
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
<asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<%--<asp:UpdatePanel ID="UpdatePanel1" runat="server">--%>
<%--
start of the menu--%>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="False" IncludeStyleBlock="False" Orientation="Horizontal"
BackColor="#FFFBD6" DynamicHorizontalOffset="2" Font-Names="Verdana"
Font-Size="0.8em" ForeColor="#990000" StaticSubMenuIndent="10px">
<DynamicHoverStyle BackColor="#990000" ForeColor="White" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicMenuStyle BackColor="#FFFBD6" />
<DynamicSelectedStyle BackColor="#FFCC66" />
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About">
<asp:MenuItem Text="Who are we" Value="Who are we"
NavigateUrl="~/whoarewe.aspx"></asp:MenuItem>
<asp:MenuItem Text="What is podcasting" Value="what is podcasting"
NavigateUrl="~/whatispodcasting.aspx">
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/listofclubs.aspx" Text="YouthClubs"
Value="YouthClubs"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/contactus.aspx" Text="Contact Us"
Value="Contact Us"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/joinus.aspx" Text="Join" Value="Join">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/admin/adminpage.aspx" Text="Admin" Value="admin">
</asp:MenuItem>
</Items>
<StaticHoverStyle BackColor="#990000" ForeColor="White" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticSelectedStyle BackColor="#FFCC66" />
</asp:Menu><%--</asp:UpdatePanel>--%>
<%-- End of the main navigation menu--%>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<p>
</p>
</asp:ContentPlaceHolder>
<div id="rightcolumn">
<asp:Login ID="Login1" runat="server" BackColor="#F7F6F3"
BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px"
DisplayRememberMe="False" Font-Names="Verdana" Font-Size="0.8em"
ForeColor="#333333" RememberMeText="" Height="159px" Width="274px">
<InstructionTextStyle Font-Italic="True" ForeColor="Black" />
<LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid"
BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" />
<TextBoxStyle Font-Size="0.8em" />
<TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em"
ForeColor="White" />
</asp:Login>
<br />
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#57dce6',
color: '#050505'
},
tweets: {
background: '#4864f0',
color: '#0a080a',
links: '#4aed05'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('YouthPodcast').start();
</script>
<br />
< </div>
</div>
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
现在我的CSS看看是否有人能找到造成问题的原因
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
min-width: 500px;
}
#rightcolumn
{
float:right;
width:300px;/*adjust width in px or %. Also adjust #content width.*/
right:-10px;
background:#44B185;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: mediumseagreen;
width: 100%;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 800px;
width: 10px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: black;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: Teal;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: HighlightText;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #FF5E00;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: block;
float: left;
text-align: left;
width: auto;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
/*--- Twitter CSS */
#twitter
{
float: right;
width: 0%;
padding: 250px;
padding-right: 0px;
right: auto;
}
#login
{
float: right;
width: 30;
padding: 1px;
padding-top: 110px;
}
/*Contact Us CSS */
#contact-area {
width: 320px;
margin-top: 25px;
background-color: Aqua;
}
#contact-area input, #contact-area textarea {
padding: 5px;
width: 300px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}
#contact-area textarea {
height: 90px;
}
#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #900;
}
#contact-area input.submit-button {
width: 100px;
float: left;
}
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}
#address
{
float:right ;
}
#logo
{ position:relative;
right:-40px;
top:-17px;
width:300px;
}
#ticker {
width:180px; height:300px; overflow:auto; border:1px solid #aaaaaa;
}
#ticker dt {
font:normal 14px Georgia; padding:0 10px 5px 10px;
background-color:#e5e5e5; padding-top:10px; border:1px solid #ffffff;
border-bottom:none; border-right:none;
}
#ticker dd {
margin-left:0; font:normal 11px Verdana; padding:0 10px 10px 10px;
border-bottom:1px solid #aaaaaa; background-color:#e5e5e5;
border-left:1px solid #ffffff;
}
#ticker dd.last { border-bottom:1px solid #ffffff;
}
/*Round conners news*/
.news
{
position:absolute;
width:200;
padding:1px;
border:3px solid gray;
margin:0px;
background-color: #B0C4DE;
text-transform:inherit;
}
答案 0 :(得分：1)
为左右列设置float:left。
答案 1 :(得分：0)
</script>
<br />
< </div>
</div>
</div>
</div>
我认为您可能在不需要时添加了1个额外支架