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

    esmi

    (@esmi)

    Forum Moderator

    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

    WPyogi

    (@wpyogi)

    Forum Moderator

    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?

    WPyogi

    (@wpyogi)

    Forum Moderator

    ?? 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!!

    WPyogi

    (@wpyogi)

    Forum Moderator

    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.