How to fix float sidebar in Wordpress with Constructor theme?


Tags: php,css,wordpress,constructor

Problem :

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



Solution :

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;
} 

    CSS Howto..

    How to rotate an element around a line other than X=0,Y=0 and Z=0 using CSS3?

    How do I keep a CSS hover rule applied when the mouse moves to the child element?

    How to use Sass mixin transition for applying transition-delay only?

    How to limit height of div when part of 2 vertical divs in fixed parent div

    Child div's evenly spaced and flushed to side of parent: how to?

    how to get this modal window to work correctly?

    How to have different transition durations for css and angular transition on same element?

    How to quickly create complex web controls for web development? [closed]

    How to wrap text in table cell at hyphen?

    How to control tr height of table in CSS

    How do I float 3 elements right above each other and one left?

    CSS - How to center Absolute Position div with max width in IE9,10,11

    How to show text on image when hovering?

    How to dynamically modify CSS rule set (e.g. with a class selector) from JavaScript within Firefox Add-on using XUL, SDK or WebExtensions techniques?

    How to auto-resize tabs to fit a fixed-width container?

    How can I get a block to print complicated divs horizontally?

    Jquery Mobile CSS Android Styling Boarders Not Showing On Button

    CSS - How to select nth-child of form element?

    How to Skew divs with css

    How to hide/show the content of a div with dynamic height?

    how to remove a TR which have a TD that contain specific text

    Selected text showing oversized selection area

    How to style SVG with external CSS?

    How to set ribbon on image by stacking it in a div?

    how do i get css source file path from firebug?

    How to remove “gap” from nav bar and line?

    How to change image size on featured images in wordpress?

    How a css selector is applied when reffering to multiple classes, ids, or elements?

    How to set the CSS content property with a Google Material Icon?

    How to darken a background using CSS?