Как создать четырехколонный жидкий нижний колонтитул?

Question

Содержание веб-сайта состоит из двух столбцов, причем правое является фиксированным, а левое - жидким с минимальной и максимальной шириной.У меня есть это, но теперь у меня проблемы с созданием жидкого, четырехколонного нижнего колонтитула, чтобы идти внизу.То, как я это делаю, заставляет колонны выглядеть ступеньками.

Мне нужно, чтобы все они правильно выстроились с равным количеством пространства между ними, когда окно растягивается.Сами столбцы также имеют различную ширину.

РЕДАКТИРОВАТЬ

Я осознал ошибку, из-за которой столбцы пошагнули, поэтому теперь я могу перейти к выяснению, как их расположитьравномерно в нижнем колонтитуле.Вот CSS, который у меня есть:

#footer .col1, #footer .col2, #footer .col3, #footer .col4{
    float: left;
    padding: 10px 0;
}

#footer .col1{
    width: 75px;
}

#footer .col2{
    width: 375px;
}

#footer .col3{
    width: 325px;
}

#footer .col4{
    width: 100px;
}

Раньше я имел ширину в процентах, но он не располагал их равномерно, как я думал.Спасибо за вашу помощь!

Answer 1

Следующее сделает это за вас:

HTML

<div id="footer">
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
</div>

CSS

#footer .column {
    float: left;
    width: 25%;
    background: red;
}

#footer .column div {
    margin: 10px;
    height: 100px;
    background: blue;
}

И в действии здесь.

Я использую вложенную структуру <div>, чтобы показать, как вы можете достичь столбов жидкости с фиксированным расстоянием между ними.Ключ при использовании% и фиксированных размеров ширины состоит в том, чтобы не применять их к одному и тому же элементу, если вы хотите быть уверены в ширине.На живом сайте было бы более разумно применить фиксированное горизонтальное поле к вложенным элементам, а не создавать вложенную структуру div, как у меня.

Ваши столбцы, скорее всего, уходят в отставку, потому что они слишком широкисочетаются в одной горизонтальной линии.В моем примере вы заметите, что ширина 4-х внешних элементов составляет до 100%.Все, что больше (скажем, путем добавления поля / отступа) может вызвать падение, которое вы видите.

Answer 2

Не видя разметки, я не уверен, как решить вашу проблему. Я бы выложил страницу так:

````````````````````````````````````
|body_______________   __________  |
|| left             | |   right  | |
||__________________| |__________| |
||````````````````````````````````||
|| footer                         ||
|| |``````||``````||``````||``````|| 
|| | .col ||.col  || .col || .col ||
````````````````````````````````````

с помощью css:

#footer { width:100%; clear:both; }

#footer .col {
  width:25%;
  float:left;
  display:block;
}