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.

I've seen order matter, mostly in IE. Typically right, left, then middle gets me the results i want cross-browser. — cHao, May 29 '12 at 18:02
I would say that something is changing the `#footer`'s width, that's why the middle and right shifte below. Can you apply a colour to the `#footer` and confirm that? — jackJoe, May 29 '12 at 18:04
As I guided myself from your CSS and barely put attention to your HTML we are not targeting the elements itselves. I've updated the code to mimic your HTML structure. — Alma, May 29 '12 at 19:10

Alma · Accepted Answer · 2012-05-29T19:12:09.580

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).

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

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

score 1 · Answer 2 · answered May 30 '12 at 23:08

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

Great answer. I ended up using CSS classes to solve this instead of IDs. — SidC, May 31 '12 at 16:54

score 0 · Answer 3 · answered May 29 '12 at 19:29

0

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

answered May 29 '12 at 19:29

Sparky

98,165
25
199
285

I add the above contents to the element, but this didn't seem to do the trick. Is there something else I should modify? – SidC May 29 '12 at 21:16
@SidC, I can't say. I took your code as you posted it [and made it do what you asked](http://jsfiddle.net/y8e4T/). Is [your actual code](http://salesandoperationsplanning.net/) different than what you posted? When you look at the code on [your page](http://salesandoperationsplanning.net/), you can see that the `id` is different than the `id`'s you're using in your CSS. – Sparky May 29 '12 at 21:18
i've edited my answer just because of this discrepancy, the cms seems to add a prefix to the ids – Alma May 29 '12 at 21:44

How to Align 3 DIVs next to each other?

3 Answers3

Linked