css: problems with floating a sidebar
Posted
by
user239831
on Stack Overflow
See other posts from Stack Overflow
or by user239831
Published on 2011-01-12T17:42:57Z
Indexed on
2011/01/12
17:53 UTC
Read the original article
Hit count: 450
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="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 {
width:100%;
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.
© Stack Overflow or respective owner
