css: problems with floating a sidebar
hey guys, i can't seem to get it working.
i have a div.post with #comments and a #respond form underneath it. the div.post contains the #comments and the #respond form. i simply want to float the sidebar to the right of the entire div.post and i cannot seem to get it work.
here is an example. any idea how to solve that - its probably quite simple. :)
<!DOCTYPE html>
<html lang="开发者_C百科en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>layout</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
#main {
background:#cfcfcf;
}
.inner {
margin: 0 auto;
padding: 96px 72px 0;
width: 1068px;
border-color: #000;
border-style: solid;
border-width: 0 1px;
color: #3C3C3C;
}
.post {
width: 705px;
background:#999;
}
#comments, #respond {
width: 705px;
background:#999;
}
#sidebar {
width:338px;
background:#777;
margin-left:730px;
}
</style>
</head>
<body>
<div id="main">
<div class="inner">
<div id="post" class="post">
<h2>Lorem Ipsum Test Page</h2>
<div class="entry">
<p>Lorem ipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div> <!-- entry -->
<div id="comments">
<h2>One Response</h2>
<ol class="commentlist">
<li id="comment" class="comment">
<div class="comment-body">
<div class="comment-author vcard">
Tom says:
</div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea found. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</li>
</ol>
</div> <!-- comments -->
<div id="respond">
<h2>Leave a Reply</h2>
<form id="commentform" method="post" action="">
<input type="text" aria-required="true" tabindex="1" size="22" value="" id="author" name="author" gtbfieldid="230"> <label for="author">Name (required)</label>
<input type="text" aria-required="true" tabindex="2" size="22" value="" id="email" name="email" gtbfieldid="231"> <label for="email">Mail (will not be published) (required)</label>
<input type="text" tabindex="3" size="22" value="" id="url" name="url" gtbfieldid="232"> <label for="url">Website</label> </div>
<textarea tabindex="4" rows="10" cols="58" id="comment" name="comment"></textarea>
<input type="submit" value="Submit Comment" tabindex="5" id="submit" name="submit">
<input type="hidden" id="comment_post_ID" value="36" name="comment_post_ID">
<input type="hidden" value="0" id="comment_parent" name="comment_parent">
</form>
</div> <!-- respond -->
</div> <!-- post -->
<div id="sidebar">
<h2>Meta</h2>
<ul>
<li>Login</li>
<li>Anything</li>
</ul>
<h2>Subscribe</h2>
<ul>
<li>Entries (RSS)</li>
<li>Comments (RSS)</li>
</ul>
</div> <!-- sidebar -->
</div> <!-- inner -->
</div> <!-- main -->
</body>
</html>
edit: can you see any errors in my html. firebug says that the sidebar div is actually outside the .inner div. however if i look at the code it's inside.
There are several ways to handle this. However, you have not set the float property for either div#sidebar or div.inner. Try adding float: left; to both and remove the margin-left property from div#sidebar.
You'll probably need to adjust your widths.
the browser is adding up the values for
.post width,
#sidebar width
AND
#sidebar #margin-left.
Take away the margin-left on sidebar, and float it right.
Edit
I just pasted this into a fiddle and thought my screen blew up. You have a number of problems with your css that go beyond simply the fix above. Most notably:
- div's default to 100% width, unless you float them.
- when you set margins on an element, that gets added to the width of the element (as does padding). If you want to specify fixed widths, be sure your widths + padding + margin (+ whatever is next to it) is smaller then the screen width.
Edit 2
Okay I found your problem with the sidebar rendering outside of the .inner div check the line: <input type="text" tabindex="3" size="22" value="" id="url" name="url" gtbfieldid="232"> <label for="url">Website</label> </div> Take that extra </div> out of there.
加载中,请稍侯......
精彩评论