[SOLVED] Center align dynamic widgets in full width header
 

Howdy!

Having trouble figuring out how to center align the widgets in a dynamic widget area I've added to the header here: http://www.picounionproject.org (the widget is the social media icons.)

I've tried adding div style="align: center;" to the configure header area around where I call the widget which doesn't seem to be working.

Any code or setting I'm missing to center align these widgets (and keep them contained to the 964px width I have established for the main content area below?

Thanks so much!

Rick

So this is going to be a lesson in debugging. Open FireFox and make sure you have the Developer Tools working (Google them and install them if you don't have them.

Next open the site and click the Tools->Web Developer->Inspector
Now find the social icons and find it's parent element and let me know what it is.

Thanks for the quick reply. Here's a screenshot of the code containing the Social Media icons widget.
https://www.dropbox.com/s/f9w36a5lyo...03.15.png?dl=0

Now if you keeo clicking on the parent elements, what do you notice about the social icons at that point?

I'm trying to get the entire widget area (which contains all of the social icons in one widget) to be centered, and contained within a specific width)

I know what you are trying to do and I think I know what you did. I could tell you or teach you how to figure it out...so go back to the site and use the inspector and locate the social icons and then in the html, click on the <td..> element that is severan pparent elements above them. Now what do you notice?

I understand the teach a person to fish concept, but if possible I'd love just the telling. :)

I think when you defined the dynamic widget area you defined it to have two cells. The social icons are in the first halgf and nicely centered in that area.

So...what code did you use the create the dynamic widget area?

You're right, I has removed the second widget as this issue with trying to center this entire widget area was happening and I thought if I could get it to work with 1 widget I could build from there.

I added a second widget so it's not an issue with 2 widgets being defined.

Here's the code in the configure header area that calls for the widget: <div style="align: center;"><?php bfa_widget_area('name=header&cells=2'); ?></div>

It expands beyond the width of the content area below so I'd like to force it to be able to contain it to a defined width so it fits with the main column below it.

with the cells=2and no width's defined, each widget area gets 1/2 the with of the parent element, in this case, the header area. If you want the icons to be centered you need to have 1 cell so remove the cells from the statement:

Thank you very much! Solved it.