centering bottom widgets in Mog Theme in WordPress

[RenaissanceMind]

Hello! I’m using Mog Theme on a site that is in the alpha stage right now, and I would like to make sure the bottom widgets remain centered on any monitor size or zoom level. If anyone tell me how to do this, I would appreciate it very much. I have beginner level experience in CSS.

Here is my site: http://www.therenaissancemind.com/

After tweaking some CSS setting, I found I could center the element by changing to “margin: 0 auto;”

However, I still haven’t been able to get the three widgest side-by-side and centered.

It seems that “float: left;” makes them line up side-by-side but also pushes the element to the left of the page. Changing it to “float: none” makes it center, but doesn’t line the widgets up side-by-side.

Here is my current CSS from main.css:

/* Secondary area */

secondary{

    margin: 0 auto;
    padding: 2em 0;
    border-top: 0px solid #AAA;


}

search{

    text-align: center;
    float: none;
    width: auto;
    margin-bottom: 1.5em;


}

aside.widget{

    float: none;
    margin: 0 auto;
    width: 13em;
    padding: 5px;


}

[Eric Gregoire]

How about something like:

#secondary {
    margin: 0px auto;
    padding: 2em 0;
    border-top: 0px solid rgb(170, 170, 170);
    width: 100%;
    max-width: 720px;
}

aside.widget {
    float: left;
    margin: 0px auto;
    width: 33.33%;
    height: auto;
}

You’d probably want to readjust them to stack when the screen gets narrow, though.

[RenaissanceMind]

@Eric Gregoire

Thanks for your reply! I tried your suggestion, and it works now! Thanks a lot! For anyone else’s reference, my current code now looks like this:

/* Secondary area */
#secondary{
    margin: 0px auto;
    padding: 2em 0;
    border-top: 0px rgb(170, 170, 170);
    width: 100%;
    max-width: 720px;
}

#search{
    text-align: center;
    float: none;
    width: auto;
    margin-bottom: 1.5em;
}

aside.widget{

    float: left;
    margin: 0px auto;
    width: 33.33%;
    height: auto;

}

If you have a few minutes, could you please explain to me exactly why this change had the desired effect? I’m still trying to get familiar with CSS, do you have any learning resources you recommend?

Thanks again for taking the time to help!

[Eric Gregoire]

Sure thing. So each widget has to be lined up next to each other as per how you wanted them and that’s where the float: left come in. You previously had float: none, which causes them to stack on top of each other. I split #secondary up into thirds, so the width of each of the widgets should mathematically be 33.33% which is as precise as we need in this case and requires all padding and margin values be removed from the left and right of each widget.

Because we are lining up this whole section (#secondary) with the inner part of your chosen background image (which is of a fixed size and centered horizontally), we need to have a max-width to stop the #secondary div from spilling its contents out of the background image inner portion when we increase the screen size beyond the width of the inner portion of the background image. The value of 720px is pretty arbitrary (can be adjusted if you prefer), but should be close to slightly less than the inner portion of the background image. Because at smaller screen sizes, the inner portion of the background image becomes 100% of the screen width and therefore the #secondary div should too (which it does if the screen is below 720px).

There are some “better” approaches that can be taken, but because this is a WordPress site, this is a quick solution I came up with while only editing the CSS. I hope my description helps you to make some sense of this.

[Author]

Posts