Support » Themes and Templates » Need CSS Help – Resizing sidebars and text area

  • Resolved ChgoWriter



    I’m using the Prosumer theme by Juahri. It’s 3-column theme with left and right sidebars.

    The sidebars were originally 200px wide, but I widened the left to accommodate a wider widget, but now they’ve increased the size of the widget (newser).

    So, I made right sidebar and the middle text area more narrow and widened the left sidebar again.

    I ran it through browsershots and it looks fine in most browsers except, of course, IE 5.5 and IE 6.0.

    The right sidebar gets pushed down.

    What am I doing wrong? The total width of the page is 950px.

    Here’s a link MySite

    oh, and I previously validated the css. right now I only have to fix a small issue with the polls plugin (background color) so it’s not a validation issue.

Viewing 15 replies - 1 through 15 (of 17 total)
  • have you tried editing the newser widget and setting it to a fixed width?

    Yeah, It’s not one that can be resized. Until a few days ago, I had one that was 250px wide and was able to adjust the wp theme to make it work. But, they changed the size to 300px and don’t offer any others anymore.

    I emailed their tech and he said it couldn’t be changed.

    I think I have to make my right sidebar 200px, left sidebar 300 px which leaves 450px for the middle content column and padding.

    I made adjustments, but in IE 5.5 and IE 6, the right sidebar still ends up at the bottom of page.

    Yours is a good idea, though…it was the first one I tried

    Heh, well IE 6 sux too.

    It’s not as simple as altering sidebar and content widths, you’ll probably also have to adjust whatever margins and paddings they have as well. Trial and error.

    Let me ask you this…When I resize all three columns, the left sidebar and the middle content column (they move together) both move left widening the gap between the right sidebar and the content column (only in IE).

    In other words, the space between the right sidebar and the content increases. I’m thinking this is the problem. How do I stop that from happening?

    Here’s the code I’ve been messing with if anybody has any ideas:

    #left {
            float: left;
            width: 630px;
    #right {
            float: right;
            width: 320px;
    #content {
            width: 450px;
            float: right;
    .post {
    	margin-bottom: 10px;
    .entry {
    	margin-bottom: 10px;
    	text-align: left;
    .entry  a {
    	color: #DC143C;
    .side1 {
    	width: 160px;
    	float: left;
    	color: #000;
    .side2 {
    	width: 300px;
    	float: right;
    	color: #000;
    .gap {
    /*	padding: 10px; */

    your page is coded with your left and center column floating inside one wrapper and your right column floats away from that wrapper.


    there is probably some padding or margins causing it. a trick i like to use when padding is involved is to put different color borders around the elements involved so you can see the edges.

    also you could try using percentages on the widths.

    thanks..I’ll try it

    OK…so I have tried everything and I’ve read about a 1000 forum posts.

    I’ve changed every variable on my style sheet at least once, but still no luck.

    I think what’s going on is this: I have two containers within the page.
    The left container includes the left sidebar and content area.
    The right container includes the right sidebar.

    It seems that when IE 6 is not adhering to the ALIGN RIGHT command in the content area.

    Any ideas how to fix this?

    Oh, and I took everything but standard widgets out of sidebars.

    I fixed it!

    First, thanks to you who offered assistance.

    For those of you who read this in the future and run into problems with “Sidebar Down in IE,” I have a couple of tips.

    The most common problem is something too wide in your sidebar. For instance, if your sidebar is 200px and you try and ad something that’s 250px…sidebar down.

    My problem came about when I tried to change the dimensions of my 3-column theme.

    The original theme had a right and left sidebar that were each 200px wide and a content area that was 510px wide. That’s 910px of usable space total with 40px (950px header)left over for margins and padding.

    The left sidebar and the content area are in one container (originally 730px) and the right sidebar is in another container (originally 220px).

    I needed to make the left sidebar 300px. To do this I had to increase #left to 320px and decrease #right to 630px.

    The math should have been right (and it is) but still my left sidebar was being pushed below the content.

    So, here’s what you do if you run into a sidebar down issue: Using Firefox, download the Firefox web developers toolbar. Once it’s installed, click the button that says “Information.” You’ll see a lot of options. Click on “Display Block Size” or “Display Topographic Information.”

    This will give a nice outline of all the blocks on your theme. Is one spilling over into another?

    In my case it was the .navigation. I hadn’t changed that number to match the new size of my left sidebar/content area container. I changed that and everything works great in practically all browsers including IE6 and 5.5.

    For those more experienced than I, I’m sure you could care less. But, for those on my level – and by the number of sidebar down posts, there’s obviously a lot – I hope this helps.

    Sorry…as a writer I just couldn’t let this go and it’s too late to edit…should have been “add something”

    Hi ChgoWriter, I’m having a similar problem with my blog at

    Could you advise me on what to do to correct the wrong container size problem? I have downloaded the firefox web developer tool bar but have no idea how to use it. I have spent so much time searching the forums but could not fix this issue and am extremely frustrated and don’t want to waste any more time on this irritating and annoying template issue which I want to resolve quickly.

    I’m sure you’ve been in my situation before. I look forward to any help you can offer. I would be extremely grateful for your help.

    Many thanks.

    Your tips helped me resize column my site. Thanks you.

    I have the same problem on my blog and even after reading tons of thread on the subject I still don’t know what to do!



    I didn’t know about the Firefox web developer tool. Wow!!




    My sidebar is at the bottom right of my page! PLEASE HELP!!

    I downloaded the above-mentioned Firefox Web Developer Tool and I can see that the “Block Sizes” are overlapping. I just can’t figure out how to correct the issue.

    Can anyone help me by viewing my page source at

    Thank you so very much. I’ve spent hours at this point trying to fix it and I’m getting no results. Thanks!

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Need CSS Help – Resizing sidebars and text area’ is closed to new replies.