Support » Fixing WordPress » How to centre Side Bar widgets CSS

  • Hi guys,

    Can someone help me with centering my sidebar widgets. This is my CSS code for my sidebar, is there anything i can change here?

    #sidebar { float: left; width: 250px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-rightradius: 10px; }
    #sidebar .block { margin: 13px 0 2-35px 0; color: #404040; padding-left: 20px;}
    /*#sidebar .block p { margin-top: 13px; padding-left: 53px; width: 172px; }*/
    #sidebar .block .divider { margin-left: -20px; }
    #sidebar .block ul { margin: 10px 0 0 0; }
    #sidebar .block ul li { color: #404040; margin: 0 0 25px 0; background: url('images/list_w.png') no-repeat; background-position: 8px 0; padding: 0 0 0 33px; }
    #sidebar .adwrap {margin-left:-17px; width:253px;}

    My website is – http://www.completemusclesndfitness.com

Viewing 12 replies - 1 through 12 (of 12 total)
  • Can i change the float left to something? I dont think float ‘centre’ or ‘middle’ works

    Thanks but nothing on that page helps me with my problem. I need the widgets to be centered not float left or right

    Can someone help me with the widget on my sidebar, the social media one. I need to centre it or at least add a small margin to the left so its in the middle of the sidebar??

    http://www.completemuscleandfitness.com

    Try
    #mashsocial {
    margin-left: 15px;
    }

    Would that go in my site themes CSS or the widgets CSS? And would it go anywhere in particular?

    Perfect, thanks for your help. Really appreciate it! 😀

    Ok nearly there, with the anove code from WPyogi i get a perfect gap if the widget width is 130px. But i need the widget to be 148px and when it is, the gap norrows so the widget is no longer centred.

    Even if i increase the margin more than 15px it doesnt increase the gap.

    Any ideas?

    ?? The mashsocial widget is set to 230px width inline CSS.

    It’s also inside of an enclosing div — that has no styles except for a bottom margin set inline.

    I’m sorry, as you have probably guessed im only a novice at this so i dont really understand what you are pointing out.

    I have been playing around with the mashsocial widget width but i cant keep the left margin i have now. If i increase the widget width more than 130px then the left margin gets smaller.

    I might be wrong but when using firebug it looked like there was a bit of a margin on the right? But like you said it has no styles except for bottom.

    So close!!

    I’m confused as to the width — you said 148px is what you need??? I’m guessing you meant 248?

    The best way to center it is probably going to be using

    #mashsocial {
    margin-left: auto;
    margin-right: auto;
    }
    But for that to work, the width must be less than 100% of the enclosing element. So look at the enclosing div (unnecessary it appears) and/or the sidebar div.

    In Firebug, space does not mean a margin — it’s only a margin if it’s highlighted as such and shows up in the computed styles.

    I think i may have done it, i widened the sidebar a little bit and used the above code you provided and it looks perfect now.

    Again thanks for your help and patience!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘How to centre Side Bar widgets CSS’ is closed to new replies.