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;
     ...
   }