How to fix float sidebar in Wordpress with Constructor theme?

Question

Please help me fix or solve a problem regarding the positioning of the sidebar. I have a Wordpress with the Constructor theme in a one right sidebar layout. The webpage can be seen in the following links. (One has a tall head menu the other has a short. The height of the side menu is varied too.)

http://salvavita.hu/web_2012/

http://salvavita.hu/web_2012/?page_id=119

The html structure is as follows:

<div class="wrapper" id="wrapcontent">
    <div class="box shadow opacity layout-right" id="content">
        <div id="container">
            content stuff
        </div><!-- id='container' -->

        <aside id="sidebar">
            sidebar stuff
        </aside>
    </div><!-- id='content' -->
</div><!-- id='wrapcontent' -->

For some reason the side menu is broken to a new line and pressed to the left, outside the container. You can see it on top of the footer. How can I force the sidebar to be rendered in the same line as the content? (So it sticks to the bottom of the top red part of the site.)

Pure css would be preferred. At this point, it is OK if it spills out of the content to the right. (Position fixed is no good, because there are two types of header heights, and it has to work with a restored down window too.)

In theory, the layout is: Width: 968px Sidebar width:220px Extra sidebar width:120px (not used) Header height: 518px (has a custom coded short variant)

Thank you for the help,

Sziro

Answer 1

Alan Jenkins is right, if you change the width of #sidebar from 216px to 208px then the sidebar works Ok. What you've done with the big righthand margin on the main container and the negative lefthand margin on sidebar seems a bit weird to me. If it was me I'd probably do something more like;

.layout-right #container {
    /* (Line 197 remove the following rule) */
    margin-right: 220px
}

.layout-right #sidebar { 
    /* (Line 202 remove the following rule) */
    margin-left: -220px;
}

#sidebar {
   /* (Line 208 reduce the width slightly and change the float from left to right) */
   width: 208px;
   float: right;
}