I need help with with resizing the widget area

If you have already created a child theme, try using Firefox with the Firebug add-on for this kind of CSS work.
https://getfirebug.com/

Your widget area jumps to the bottom of the page because the #content div has a fixed width; this means that the div containing both the #content and the #secondary won’t fit next to eachother.

Quick fix is to subtract the width from the #content div and then add it to the #secondary div.

hi guys, thanks for the fast response.

I’ve tried the subtraction and it still occurs. it’s as if the widget area can not be bigger than a certain amount.

Have you tried subtracting a little more; with padding and margins applied to an element; boxes can still be to big to coexist next to eachother. Anyway; css is a pretty logical language (unless your working in Internet Explorer 6 or 7), so don’t worry; you’re not stuck.

To be honest with you you, I’m not really experienced in CSS styling but have learnt alot while creating my blog.

This is my current settings:
}
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
border-right:1px solid #bbb;
padding-right:20px;
border-left:1px solid #bbb;
padding-left:20px;
}
#secondary {
float: right;
margin-right: 4.6%;
width: 21.1%;

//

Have you noticed anything wrong? as soon as I’ve tried to increase the width to 25.1 % and the subtract it from content width to 54.4% and it still causes the widget area to only be visible underneath the main content.

Thank you!

Ouch, you’ve entered a bit of a pro-area; percentages are one of the most complicated parts of box position/dimensions… try decreasing the width to 52% or even 50%…

I’ve tried. ??

I’m pretty sure it will not allow me due to the widget area being to big?

So maybe I am stuck lol

It took the liberty to play with the css myself:
Twenty eleven’s build-up is a bit weird, that’s what was causting the problems.
You need to edit the #primary div too:

#primary{

    float:left;
    margin: 0 0 -26.4% 0;
    width:75%;
}

The content div:

#content{

    margin: 0 0 0 7.6%;
    width:75%;
    ... etc.

}

and the secondary div:

#secondary{

    float:right;
    margin-right:4.6%;
    width:25%;
}

Now it should work.

So you want me to lower the primary width to 75%? it is currently at 100%?

Will that make it work?

Or does the content and primary width need to match?

No they don’t have to match; like I said; Twenty eleven is a bit messed up this way;
Just follow the instruction above and it will work; I’ve tried it with my browser editor and it looks good.

I have to lower the primary div ! yes? lol

Sorry just making sure

Yes. yes. yes. yes. yes. yes. yes. (just making sure ;-))

If you’re still afraid this will mess everything up; create a backup of your stylesheet first and then change the divs…

haha.

Mate your a genius. I’ve been trying to do this for at least 1 month but gave up!

I’ve tried it and love it!

I hope you have a great week!

Thank you

An issue has occurred. I’ve tried to see my site on my iPhone and now it is messed up (too narrow on the screen, only filling our 40& of the screen)

Any solutions to this? Thanks