Center Aligning Content in Footer, And a bunch of other junk... Options

[John Pozadzides]

Ok gang. Back to this Wordpress theme I'm working on...

First of all, the staging site is at http://1mansblog.com

Now, if you look down at the bottom of the page you'll see there are two "Widgets" including descriptions and text. They are each enclosed in <div class="RecentPosts">, and are cumulatively contained within the footer widget area <div class="FooterWidgetArea">.

What I want is for the widgets to be center aligned. Not the text within them.

So, if the page would look like this:

CODE

---------------------------------------------
|                                           |
|                                           |
|                                           |
|                                           |
|                                           |
|                                           |
|                                           |
|                                           |
|          Widget           Widget          |
---------------------------------------------

The method of alignment also needs to be flexible enough to accomodate any number of Widget areas. So, if there is only 1 it needs to be centered, or if there are 3 they need to be centered.
Anyone got a suggestion of how to tackle this issue? Obviously I can add or remove DIVs or do anything else so any suggestion or even pointers to other sites would help.

Also, as you're reading through there, feel free to criticize ANYTHING else you find... but only on the front page for now. There is still a ton of work to go on this but I might as well start knocking out the items everyone finds while I'm working on it. Now as you examine the code you're going to see that I've also used a table for the header layout - an obvious no-no which I'll work on later.

Thanks,

John

[John Pozadzides]

Incidentally, for a better view of what I want the footer to look like, see: http://www.bloggingpro.com/

The difference is that their site is fixed width and I'm trying to make it work with fluid width.

John

[Effovex]

I have a neat solution but it only works in Opera (maybe Safari/Konq, Swift isn't working too well for me...)

.FooterWidgetArea {width: 100%; float: left; background: #003399; padding: 5px 0px; text-align: center;}
.FooterWidget .RecentPosts {display: inline-block; text-align: left;}

So, back to the drawing board I guess

[Effovex]

I'm really having a hard time coming up with a way to fluidly place an unknown number of block items side-by-side and then center them.

Other than inline-blocks of course.

BTW, it would work in Safari, I think. Swift wouldn't load the file from my hard drive but Quirksmode has a nifty support table as well as a test case which Swift passed. The little thing crashes non-stop and doesn't know jack about scripting but it renders CSS better than IE or FF

[John Pozadzides]

I'm glad it isn't just me. :-) It must be possible, but I can't quite get it.

John

[Effovex]

It's possible if you can determine in advance how many widgets there will be. You can create several ids (for instance, widget1, widget2,widget3) each with it's own child rules and then generate the page with an id appropriate for the number of widgets that will be contained in the footer, but I'm fairly certain it's not possible to center it with floats and columns if you don't know how many columns you're going to have.

[John Pozadzides]

Yeah, I can't quite get it either but there must be a way. I might have to find a way to hack it into a table which is center aligned or something like that.

Surely someone out there can figure this one out? ;-)

[Christian J]

I have a neat solution but it only works in Opera

This page: http://pmob.co.uk/pob/centred-divs.htm mentions a workaround that makes "inline-block" work in IE5.5+ even on block level elements.

[Dr Z]

Well folks, I will start wih a disclaimer: At this point when I am posting this, I have to admit that I am very tired and I am not sure if I am thinking straight. So if I make a total fool of myself, please have mercy.

OK, here goes the crazy idea:
Starting with a div - .bottom
Then adding a a single row table inside .bottom
Each widget would be in a cell (alligned center) in eadch cell
As more widgets are needed, more cells can be added

[Frederiek]

How about this? I took the code from a page I once made for my daughter to learn traffic signs at school. I centers images (90 x 90 px) in a div.

CSS:
#widgets {
margin: 0 auto;
text-align: center;
}

#widgets img {
display: inline;
border: solid 1px #ccc;
padding: 2px;
margin-top: -3px;
margin-left: -5px;
width: 90px; /*image width*/
height: 90px; /*image height*/
}

#widgets img:hover {
border: solid 1px #f00;
}

HTML:
<div id="thumbs">
<img src="images/widget1.gif" alt="widget1">
<img src="images/widget2.gif" alt="widget2">
<img src="images/widget3.gif" alt="widget3">
<img src="images/widget4.gif" alt="widget4">
<img src="images/widget5.gif" alt="widget5">
</div>

There's no caption text under each image, but I might have some sample for that too. Just give me some time to find it.

Found it, but it doesn't center everything ;-(

This post has been edited by Frederiek: Apr 6 2007, 10:37 AM

[Christian J]

Well folks, I will start wih a disclaimer: At this point when I am posting this, I have to admit that I am very tired and I am not sure if I am thinking straight. So if I make a total fool of myself, please have mercy.

OK, here goes the crazy idea:
Starting with a div - .bottom
Then adding a a single row table inside .bottom
Each widget would be in a cell (alligned center) in eadch cell
As more widgets are needed, more cells can be added

A table layout? Outrageous!

OTOH you can use CSS "display: table-cell", but IE doesn't support it.

[Christian J]

This page: http://pmob.co.uk/pob/centred-divs.htm mentions a workaround that makes "inline-block" work in IE5.5+ even on block level elements.

This seems to work in IE6, Opera7/8/9 and all(?) versions of Mozilla/Firefox. Basically IE uses "display: inline-block" while Mozilla/Firefox uses "display: table-cell" to get the same visual effect (Opera appears to support both methods). Haven't tested in IE5/win, IE5/mac, IE7 or Safari.

CODE

div.outer {
text-align: center; /* for browsers that support "display: inline-block" */
display: table; /* for browsers that support "display: table-cell" */
margin: 0 auto; /* centers the shrink-to-fit CSS table */
}
/* The following three rules must be separate, despite the identical div.inner selector: */
div.inner {
display: inline-block;
border: solid red;
text-align: left;
}
div.inner {display: inline;} /* IE bugfix that makes "display: inline-block" work on block elements */
div.inner {display: table-cell;}

<div class="outer">
    <div class="inner">
        <ul>
        <li>foo</li>
        <li>foo</li>
        </ul>
    </div>
    <div class="inner">
        <ul>
        <li>foo</li>
        <li>foo</li>
        </ul>
    </div>
</div>