0

For example 2 widgets placed in the sidebar would split the size 50/50 and **3 would yield 33.333/33.333 etc. Max of six areas would be helpful. I can't seem to find any solutions that work. Twenty Twelve doesn't come with an editable footer from the start. It would be great if the sidebar is empty it would collapse as well. If anyone has tackled this or knows a solution it would be much appreciated. I'm just trying to make it easier on the user editing the site and give them a little flexibility.

I am all good with CSS, and symantec HTML, so even if it's a class solution that would help, I am not a programmer.

tshepang
  • 12,111
  • 21
  • 91
  • 136
cjvalotta
  • 19
  • 1
  • 5
  • What would happen with 5 widgets in a sidebar ? – Obmerk Kronen Mar 05 '14 at 18:23
  • This use case is for a footer-widget area, I was looking to allow the user to place a number of widgets in the "sidebar" and have it expand in an equidistant format. The widgets are aligned side by side. – cjvalotta Mar 05 '14 at 19:03

1 Answers1

1

Personally, I would use PHP to do this, because it's going to give you more control (for example, to make the sidebar/footer collapse if there aren't any widgets present). And, learning PHP will only make you a better WordPress designer.

With that said, a pure CSS solution would be to use table-layout: fixed, which is supported pretty well by modern browsers. This will allow an indeterminate number of widgets, and the width will be evenly split between them.

Here's what it would look like (hat tip to this post):

footer 
{
    display: table;
    width: 100%;
    table-layout: fixed;
}

footer > .widget /* or whatever your top-level widget element is */
{
    display: table-cell;
    width: 2%; /* might have to adjust this, but you must specify some kind of value */
}

Demo, showing 1-6 columns with automatic widths: http://jsfiddle.net/Z7C5s/

Community
  • 1
  • 1
Chris Fletcher
  • 2,367
  • 1
  • 16
  • 19