Макет с двумя столбцами, один из которых имеет фиксированную ширину в CSS

Question

Я хочу хороший 2-колоночный макет с использованием CSS float.

Колонка №1 160 px Столбец № 2 100% (т. Е. Остальная часть пространства).

Я хочу сначала разместить div Col # 2, поэтому мой макет выглядит так:

<div id="header"></div>
<div id="content">
     <div id="col2"></div>
     <div id="col1"></div>
</div>
<div id="footer"></div>

Каким должен быть этот эффект?

Answer 1

Ничего из перечисленного не будет работать.

div#col2 {
    width: 160px;
    float: left;
    position: relative;
}

div#col1 {
    width:100%;
    margin-left: 160px;
}

Это предполагает, что столбец 2 должен отображаться в виде левой боковой панели, а столбец 1 - в качестве основного содержимого.

Answer 2

Хотя вопрос задается много лет назад, я даю этот полезный ответ для любых будущих ссылок и подобных случаев.

Помещая #col1 перед #col2 в разметке, вы можете плавать вправо, в случае, если у вас есть LTR lauout (если у вас есть разметка RTL, затем всплыть влево) и дать другой столбец overflow: hidden.

Обратите внимание, что родитель (#content) также должен иметь overflow: hidden:

#content{
  overflow: hidden;
  padding: 20px 0;
  height: 100px;
  background-color: #cdeecd;
}

#content #col1{
  float: right;
  width: 160px;
  height: 100px;
  background-color: #eecdcd;
}

#content #col2{
  height: 100px;
  overflow: hidden;
  background-color: #cdcdee;
}

<div id="content">
     <div id="col1"></div>
     <div id="col2"></div>
</div>

Answer 3

Вы должны использовать float: left в первом столбце и float: right во втором столбце

Answer 4

Я думаю, вы могли бы сделать что-то подобное.

div#col2 {
  padding-left: 160px;
  width: 100%;
}

div#col1 {
  float: left;
  width: 160px;
}

Это зависит от #col1, предшествующего #col2, что может сделать его непригодным для использования.

Это не так, но полагается, что #col1 будет длиннее:

#content {
  position: relative;   
}
div#col2 {
  width: 160px;
  position: absolute;
}

div#col1 {
  width: 100%;
  margin-left: 160px;
}

Это сохранит нижний колонтитул на месте.

div#footer {
  clear: both;
}

Answer 5

Для этого вы должны использовать CSS-свойство "float". Проверьте простую реализацию здесь . И вы можете найти более подробную статью здесь