Как выровнять 3 DIVs рядом друг с другом?

Мне нужно создать 3 DIVs в контейнере DIV нижнего колонтитула, которые выровнены влево, в середине и вправо. Все примеры CSS, которые я видел, используют float, как я сделал. Однако по какой-то причине DotNetNuke не правильно разбирает CSS. Я обнаружил, что левая панель плавает правильно, но правая и средняя панели расположены непосредственно под ней, а не рядом с ней. Вот фрагмент моего файла ascx:

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

Здесь соответствующая часть моего CSS файла:

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

Какие изменения я должен сделать выше для достижения желаемого макета?

Обновление: я пробовал предлагаемое изменение, но макет по-прежнему не работает на этой странице salesandoperationsplanning.net, которая демонстрирует, что я хочу.

Ответы

Ответ 1

Прежде всего, вы должны настроить таргетинг на имена элементов, которые отображаются в вашем HTML. Похоже, ваш CMS добавляет какой-то префикс, и ваши идентификаторы не совпадают. (У вас есть #footerleftpane, но он отображается как #dnn_footerleftpane)

Кроме того, поскольку вы используете контейнер с фиксированной шириной, нет проблем с проблемами, возникающими при передаче ширины в средний контейнер. Дайте ему ширину и посмотрите, работает ли она. Если это не так, вы можете попробовать еще два метода, если ваши блоки находятся в правильном порядке источника (слева, в центре, справа).

Вы можете поместить их все влево, убедившись, что его ширина и прокладки соответствуют контейнеру.
```
#dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
  width: 300px;
  float: left;
  ....
}
```
Вы можете использовать display: inline-block, также, чтобы соответствовать вашим ширинам и paddings на контейнере
```
#dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
  ....
  display: inline-block;
  ...
}
```

Ответ 2

это вопрос о позициях, размерах и неправильных объявлениях css.

1) позиция У вас есть средняя панель после правого в вашем источнике страницы!

2) размеры Я сделал быстрый тест, и вы можете исследовать его дальше, но 300px слишком много для ширины боковых панелей. Что-то в содержании, вероятно, изменяет ширину.

3) объявления css DotNetNuke (на самом деле все элементы управления ASP.Net) отображает серверные элементы управления (объявленные как runat = "server" ), присваивая им уникальный идентификатор, поэтому то, что вы ожидаете быть #footerleftpane в вашем css, будет #dnn_footerleftpane.

После перестановки вашей средней панели просто... в середине двух других, измените свой css следующим образом:

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

Ответ 3

Контейнер нижнего колонтитула - 960 пикселей. Ваш левый и правый элементы - 300 пикселей, но вы не указали ширину для вашего среднего элемента, поэтому по умолчанию используется полная ширина его родительского элемента, которая сама по себе выталкивает себя в новую строку.

Вычесть отступы, а средний элемент не может быть шире 340 пикселей.

http://jsfiddle.net/y8e4T/

http://jsfiddle.net/y8e4T/show

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