WordPress.org

Ready to get started?Download WordPress

Forums

How to centre Side Bar widgets CSS (13 posts)

  1. SCO7TY
    Member
    Posted 2 years ago #

    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

  2. SCO7TY
    Member
    Posted 2 years ago #

    Can i change the float left to something? I dont think float 'centre' or 'middle' works

  3. esmi
    Forum Moderator
    Posted 2 years ago #

  4. SCO7TY
    Member
    Posted 2 years ago #

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

  5. SCO7TY
    Member
    Posted 2 years ago #

    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

  6. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

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

  7. SCO7TY
    Member
    Posted 2 years ago #

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

  8. SCO7TY
    Member
    Posted 2 years ago #

    Perfect, thanks for your help. Really appreciate it! :D

  9. SCO7TY
    Member
    Posted 2 years ago #

    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?

  10. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

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

  11. SCO7TY
    Member
    Posted 2 years ago #

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

  12. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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.

  13. SCO7TY
    Member
    Posted 2 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic