CSS右侧栏未与右侧对齐

Question

On my webpage the right side bar is at the bottom of the main content. and is not properly aligned with the main content section. The CSS code for the right side bar is:

#sidebar{
 background: #ddd;
 float: right;
 }

There is a <div> section named sidebar-wrap which is the container for the sidebar that has the following code:

#sidebar-wrap {
float: right; 
width: 200px; 
padding: 20px;
margin-top: 20px;
margin-bottom: 20px;
padding-left:20px;
padding-right:20px;
}

Answer 1

You have right-side padding that pushes the text to the left. Just remove that if you don't want it. Eg

#sidebar-wrap {
  float: right;
  width: 200px;
  padding: 20px;
  margin: 20px 0;
  background: rgb(221, 221, 221);
}

Update: I've moved the background color to #sidebar-wrap and replaced the padding, for a better effect.

Also, for the sidebar to sit beside the main content, you need to move it above the .entry-content div. There are other ways to do this and keep the content first in the HTML, but this is the easiest way to do it if you don't mind the sidebar coming first in the HTML.

Here's an example of re-ordering the code (with a few inline styles for simplicity, though they should be moved to the style sheet, of course):

<h1>Main Content</h1>
<div id="sidebar-wrap" style="margin-top: 0; padding-top: 0;">
    <div id="sidebar">
        <p>this is the sidebar.</p>
    </div>
</div>
<div class="entry-content" style="overflow: hidden;">
    <p>There was nothing so VERY remarkable in that; nor did Alice think it so VERY much out of the way to hear the Rabbit say to itself, &#8220;Oh dear! Oh dear! I shall be late!&#8221; (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually TOOK A WATCH OUT OF ITS WAISTCOAT-POCKET, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
    <p>In another moment down went Alice after it, never once considering how in the world she was to get out again. The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.</p>
</div>

Answer 2

you need to add 2 extra divs and increase the size of page to 800px or so, add two divs ie

    .leftDiv {
    float:left;
    width:500px;
    }

    .rightDiv{
    float:right;
    width:295px;
    }

    .clear{
    clear:both;
    }

the divs need to seperate the text and the side bar so for example:

            <div class="leftDiv">


                                <h1>Main Content</h1>
           <div class="entry-content">
               <p>There was nothing so VERY remarkable in that; nor     ll.</p>
            </div>
            </div>

            <div class="rightDiv">

            <div id="sidebar-wrap">
            <div id="sidebar">
            <p>this is the sidebar.</p>
            </div>
            </div>

    <div class="clear"> </div>