Problem with sidebar

HTML & CSS
1

Please help me fix sidebar
here’s the css code

#body Content {
margin:0px; padding: 0px;
float: left;
margin-left: 3%;
}
/*—sidebar styles — */
#body #sidebar {
margin:0px; padding: 0px;
float: right;
width: 300px;
margin-right: 2%;

}
h3.title {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: #FFD595;
font-size: 100%;
color: #333;
}
#body #sidebar .meta-container {
width: 300px;
margin: 0px; padding: 0px;
margin-right: 2%;
height: 100px;

}
/*—content post — */
h3.post-title {
text-decoration: none;
color: #333;
font-weight: bold;
}
.meta-post {
float: left;
width: 50%;
height: auto;
}

2

Without the HTML or seeing the live page, it’s a bit of a guess, but the problem seems to be that you have no width set on Content, so it is going full width. Float doesn’t work unless you set a width on the element. :slight_smile:

3

here is the html

<div id=“body”>
<div id=“content”>
<h3 class=“post-title”>What is lorem ipsum!</h3>
<div class=“meta-post”>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
<div class=“inner”>
<!--------CONTENT---------->

<!---------SIDEBAR------------>
<div id=“sidebar”>
<h3 class=“title”>Site menu</h3>
<div class=“meta-container”>
Good code is maintainable, reusable, and testable. These 10 tips address how you and/or your development team can handle various coding tasks and how to keep everything as neat as possible.
</div>

            &lt;h3 class="title"&gt;About prifantom&lt;/h3&gt;
            &lt;div class="meta-container"&gt;
                Good code is maintainable, reusable, and testable. These 10 tips address how you and/or your development team can handle various coding tasks and how to keep everything as neat as possible.
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/div&gt;

&lt;/div&gt;&lt;!--body--&gt;
4

Try my suggestion above. Put a width on the Content div. Otherwise float doesn’t work.

5

man i did 100% still dosent work any else suggestions?

6

If you se it to 100%, nothing will change, because that is what is happening already. You can’t expect the sidebar to sit next to content if content has a 100% width. So if your container is set to, say, 900px, and your sidebar is 300px wide, set your content div to something like width: 580px. Two floats can’t site beside each other unless there is room for them both. :slight_smile:

7

ok thanks i found the problam