我正在尝试使用HTML和CSS设置模板,我的侧边栏出现问题。它似乎被推到我的内容之下,尽管它应该是左边的。我想不通为什么?有没有人有任何建议?
示例: http://jsfiddle.net/zDdfn/
HTML:
<head>
<title>working</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="banner"> </div> <!-- End banner div -->
<div id="navcontainer">
<ul id="navlist">
<li><a href="index.php">HOMEPAGE</a></li>
<li><a href="about.php">ABOUT</a></li>
<li><a id="current" href="index.php">HOMEPAGE</a></li>
<li><a href="index.php">HOMEPAGE</a></li>
</ul>
</div> <!-- End navcontainer div -->
<div id="content">main content
</div> <!-- End content div -->
<div id="sidebar"> sidebar content
</div> <!-- End sidebar div -->
<div id="footer"> foooter </div> <!-- End footer div -->
</div> <!-- End container div -->
</body>
和CSS
html, body {
height: 100%; /* Required */
}
body {
margin : 0;
padding : 0;
font : 75% "Trebuchet MS", verdana, arial, tahoma, sans-serif;
line-height : 1.8em;
color : #000000;
background : #F5F5FF;
}
#container {
position: relative;
min-height: 100%;
width : 800px;
margin : 0 auto 0 auto;
border-style: solid;
border-width:1px;
background : #FFFFCC;
}
#banner {
color : #000000;
border-style: solid;
border-width:1px;
height : 150px;
background : #fff
}
#content {
min-height: 100%;
float:right
padding : 10px;
margin-left : 200px;
margin-bottom : 10px;
color : #666;
background : #F5EBCC;
border-left-style:dotted;
border-left-color:#8F8F00;
border-bottom-style:dotted;
border-bottom-color:#8F8F00;
}
#sidebar {
float : left;
width : 20px;
padding : 10px;
color : #000000;
border-style: solid;
border-width:1px;
}
#footer {
clear:both;
position:relative;
bottom: 0;
width: 800px;
background : #FFFFCC;
}
#navcontainer {
background:#E0E066;
}
#navlist {
list-style: none; /* list-style: none removes bullets */
margin: 0px;
padding : 0.5em 0;
}
#navlist li {
display: inline;
margin : 0;
}
#navlist li a {
padding : 0.5em 0.5em;
margin: 0;
color : #000;
background : #B8B800;
text-decoration : none;
}
#navlist li a:hover {
color : yellow;
background : #8F8F00 url(img/menu_arrow.gif) bottom center no-repeat;
}
#navlist li a#current {
color : #fff;
background : #8F8F00 url(img/menu_arrow.gif) bottom center no-repeat;
}
答案 0 :(得分:2)
在HTML中切换#content和#sidebar div标签的顺序将解决此问题,因为您正在使用相反的浮动技术:http://jsfiddle.net/vrdZZ/
答案 1 :(得分:0)
你在#content规则中浮动后丢失了一个半冒号。