Three column Footer with XHTML/CSS

HTML & CSS
1

Hi,

I’m designing a skin for a DotNetNuke site and need to have 3 DIVs in my footer container DIV positioned left, right and middle. The left div contains some elements already as does the right div. The middle div will contain an image map that will be placed within a text/html module in that DIV after the skin is finalized.

At this point, the footerRightPane and footerMidPane are not positioned correctly. Here’s the CSS as it stands now:

#footer
{
    width: 960px;
    border: 1px;
}
#footerleftpane
{
    width: 300px;
    float: left;
}
#footerRightPane
{
    width: 300px;
    float: right;
}
#footerMidPane
{
    padding:10px;
}

My home.ascx file contains this markup:

<div id="footer">
    <div id="footerleftpane" runat="server">
        <dnn:LOGO id="dnnLogo" runat="server" />
        <h3>Driving business performance.</h3>
        <h3>Practical Sales and Operations Planning</h3>
        <h3>for medium sized businesses.</h3>
    </div>
    <div id="footerRightPane" runat="server">
        <dnn:COPYRIGHT id="dnnCopyright" runat="server" /><br />
        <dnn:PRIVACY id="dnnPrivacy" runat="server" />
        <dnn:TERMS id="dnnTerms" runat="server" />
        <br class="clear" />
    </div>
    <div id="footerMidPane" runat="server">
    </div>
</div>

What changes are needed to ensure that the 3 divs align next to each other within the container div?

Thanks,
Sid

2

Floats were never intended to build entire layouts, and there are better methods out there now. I’d recommend either inline blocks or CSS tables (emphasis on the CSS part, as HTML tables are for tabular data only) for something like this.

CSS tables work well for columns because, like HTML tables, they don’t allow wrapping, so it’s pretty much guaranteed that they won’t break.

The only problem with these methods is browser support. I’m pretty sure IE8 and up supports both inline-blocks and CSS tables, so unless you’re adamant on supporting browsers from prehistoric times, you should be fine.

3

Dunno where you got that idea… I’d suggest whatever it was you ignore it.

Given it’s opposing alignments, and the lack of predictable behavior for table-cell and sizings… uhm… no…

I’m stuck wondering why it isn’t working for you… float left, float right, no float. Should go right in no problems. Do you have an example/live page of it so we can see it failing? I suspect whatever is going wrong is probably

Though… did you forget to add float:wrapping like overflow to the outer wrapper? Are you just asking why the parent #footer is only showing 0px tall with it’s borders stacked behind the floats? If so, that’s a lack of float clearing/wrapping. Add overflow:hidden to #footer, be done with it.

Though I would suggest losing all the pointless fictional “runat” nonsense, but that’s just ASP taking a whiz all over your markup. I’m also curious why you’ve got H3 there when none of them have content after them… since numbered headings are to indicate the start of a subsection, not just text you happen to want larger on a page.

4

@webdbapps You might as well just float each of those columns, since the design is fixed width anyway. You’d just need to set a width on the middle column, too.

[ot]

As mentioned, that’s arguable. Even from the earliest days, the W3C had a page that demonstrated their usefulness for page layout. (That page disappeared only a couple of years ago, sadly.)[/ot]