Widgets on either side of content

  • SBonse

    (@sbonse)


    13 years ago

    Website: https://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!

Viewing 4 replies - 1 through 4 (of 4 total)
  • BrianWK

    (@brianwk)

    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.

    Thread Starter SBonse

    (@sbonse)

    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.

    Michael

    (@alchymyth)

    the problem is with your css positioning;
    https://www.w3schools.com/css/css_positioning.asp

    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:

    body{min-width:1230px;}
#wrapper{position:relative;overflow:visible;}
#primary{position:absolute;right:-250px;margin:0;}
#secondary{position:absolute;left:-250px;margin:0;}

    (not cross-browser tested)

    edit:
    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.

    Thread Starter SBonse

    (@sbonse)

    Thank you, sorry for the trouble then.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Widgets on either side of content’ is closed to new replies.