How to Align 3 DIVs next to each other?

Question

I'm needing to create 3 DIVs in a footer container DIV that are aligned left, middle and right. All the CSS examples I've seen make use of floats as I've done. However, for some reason DotNetNuke is not parsing the CSS correctly. I'm finding that the left pane is floating correctly, but the right and middle panes are positioned immediately below it instead of next to it. Here's a snippet from my ascx file:

<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" />
</div>
<div id="footerMidPane" runat="server">
</div> 
</div>

Here's the relevant portion of my CSS file:

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

What changes should I make to above to achieve the desired layout?

Update: I tried suggested change but the layout is still not working as seen on this salesandoperationsplanning.net page that demonstrates what I want.

Answer 1

First of all, you should target the names of the elements that appear in your HTML. Looks like your CMS appends some sort of preffix and your ids doesn't match. (You have #footerleftpane but it renders as #dnn_footerleftpane)

Also, as you are using a fixed width container there is no use to the troubles generated by not passing a width to the middle container. Give it a width and see if it works. If it doesn't you can try two more methods, if your blocks are in the correct source order (left, center, right).

1. You can float them all left, making sure its widths and paddings fit on the container.

   #dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
     width: 300px;
     float: left;
     ....
   }
   

2. You can use display: inline-block, also making sure to fit your widths and paddings on the container

   #dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
     ....
     display: inline-block;
     ...
   }
   

Answer 2

it's a matter of positions, dimensions and wrong css declarations.

1) position You have the mid pane after the right one in your page source!

2) dimensions I made a quick test and you can investigate further, but 300px is too much for the width of side panes. Something in content probably modifies width.

3) css declarations DotNetNuke (actually all ASP.Net controls do) renders server-side controls (declared as runat="server") assigning them an unique id, thus what you expect to be #footerleftpane in your css, will be #dnn_footerleftpane.

After repositiong your middle pane just... in the middle of the other two, modify your css like this:

    #footer
    {
        width: 960px;
        height: auto;
        margin:0;
        padding:0;
        border: 0;
    }

    #dnn_footerleftpane, #dnn_footerRightPane{
        width: 290px;
        float: left;
    }

    #dnn_footerMidPane
    {
        width: auto;
        float: left;
    }

Answer 3

Your footer container is 960 pixels. Your left & right element are 300 pixels but you have not specified a width for your middle element, so it defaults to the full width of its parent, which pushes itself to a new line all by itself.

Subtract the padding and the middle element can't be wider than 340 pixels.

http://jsfiddle.net/y8e4T/

http://jsfiddle.net/y8e4T/show

#footerMidPane{
    width: 340px;
    float: left;
    padding: 10px;
}​