Sidebar wont float right wordpress

Question

I have used emptycanvas as a starting point for wordpress. I've set the .wrapper to 80% width with a max-width:1250px;

The Container, which holds the content/sidebar is set to width 100%, and the content has no width set, and is set to float:left; with no other options, the sidebar is set to 350px; with float:right....for some reason it refuses to float and always goes below the content! If I set a width of for example 500px on the content everything goes into place....I thought without a specified width it will automatically adjust to the items floating around it...so what am I doing wrong here?

Unfortunately this is on a local server so I cannot show the exact code but there isn't anything extra here that I haven't told you..

Thanks!

The container holds both the center and right bars? What holds the wrapper? — Felipe Alameda A, Nov 25 '12 at 05:18
It is clear that center and sidebar don't fit inside the maximum width. Either one has to shrink, usually the center bar or content as you call it. You have to work only with percentages if you want a **fluid** theme. — Felipe Alameda A, Nov 25 '12 at 05:31

yibe · Accepted Answer · 2012-11-25T07:11:58.653

You need to rectify two problems for your layout to work as intended(please see below the code I just created based on your description)

You need to specify the width of the content div. Otherwise, the width of the div will be determined by the widths of the content inside it. This cannot give you manageable layout.
The two floated DIVs cannot be contained inside the container div (You can check this by giving different backgrounds to the container, content and sidebar divs as I did below) This is because, non-floating division cannot contain only floated contents, with its default display setting (default display property for the div is block). To solve this problem, you need to change the display property of the container to table. The other way to contain the content and sidebar inside the container is to add one more non-floated div and clear it from floated objects(clear:both).

The HTML
```
<body>

    <div id="wrapper">
        <div id="container">
                <div id="content">
                     <h1> I am inside content. what will happen if I increase the content in here? </h1>
                </div>
                <div id="sidebar">
                      <h1> I am inside the side bar </h1>
                </div>
        </div>

    </div>

</body>
```

The CSS

#wrapper{
margin:0 auto;
width:80%;
max-width:1250px;
}
#container{
width:100%;
background:red;
display:table; /*This is necessary to wrap the two floated contents inside. The other way of achieving same result is to add some non-floated div and set to clear floated contents*/
}
#content{
float: left;
background:green;
}
#sidebar{
width:350px;
float: right;
background:blue;
}

You need to specify width for #content. – yibe Nov 25 '12 at 06:46 — yibe, Nov 25 '12 at 06:46

Sidebar wont float right wordpress

1 Answers1