Widgets on either side of content (5 posts)

  1. SBonse
    Posted 3 years ago #

    Website: http://crabapplesmicrobrewpub.com/wordpress/

    I'm using WordPress theme Twenty Ten (Child theme of course)

    What I would like to do is have the primary widget on the right and the secondary widget on the left. I also would like them to float mostly outside of the content area, as they are doing now.

    The problem I am having is that I used overflow: visible - and I think that both widgets are just stacking on top of each other.

    Right now I have both widgets containing something but Secondary is appearing over top of Primary, obstructing it from view.
    Any tips on how I could make this work?

    Thank you!

  2. BrianWK
    Posted 3 years ago #

    I think the problem lies here...

    #primary, #secondary {
        background-color: #FFFFCC;
        border: 1px solid #218C64;
        float: right;
        margin: -5px 0 10px -20px;
        overflow: visible;
        padding: 10px;
        position: absolute;
        right: 50px;
        width: 220px;}

    It seems like this is where your problem may lie. You might want to split these up so that primary and secondary have their own styles and you don't have any conflicts. You could probable use the same css for each and set the secondary(or whichever one you want) to float left. And adjust padding and margins accordingly.

  3. SBonse
    Posted 3 years ago #

    I actually did do that originally. It didn't give me any different results. I changed it back to what you see above just so I could pick up where I originally started. I should have clarified that, my apologies.

  4. Michael
    Part-Time Forum Moderator
    Posted 3 years ago #

    the problem is with your css positioning;

    however, this is not a primary WordPress related problem, and it is not within the scope of this forum to teach basic formatting.

    generally, consider these fixes:


    (not cross-browser tested)

    on second thaoughts, if you want to have the widgets relative to the browser window, forget the above, and add a different/separate left: 50px; position to #secondary.

  5. SBonse
    Posted 3 years ago #

    Thank you, sorry for the trouble then.

Topic Closed

This topic has been closed to new replies.

About this Topic