gridcss - Diseño de dos columnas con una que tiene un ancho fijo en CSS

grid css responsive

Question

Quiero un buen diseño de 2 columnas usando CSS float.

Columna # 1 160 px Columna # 2 100% (es decir, el resto del espacio).

Quiero colocar el div del Col # 2 primero, para que mi diseño se vea así:

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

¿Qué tiene que tener este efecto?

Answer 1

Debería usar la propiedad CSS "flotante" para hacer esto. Consulte aquí una implementación simple . Y puedes encontrar un artículo un poco más detallado aquí

Answer 2

Tienes que usar float: izquierda en la primera columna y flotar: derecha en la segunda columna

Answer 3

Creo que podrías hacer algo como esto.

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

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

Esto se basa en que #col1 viene antes de #col2 , lo que podría hacerlo inutilizable.

Esto no, pero depende de que #col1 sea ​​el más largo:

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

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

Esto mantendrá el pie de página en su lugar.

div#footer {
  clear: both;
}

Answer 4

Ninguno de los anteriores funcionará.

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

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

Eso supone que la Columna 2 debería aparecer como una barra lateral izquierda, con col 1 como contenido principal.

Answer 5

Aunque la pregunta es hace años, proporciono esta útil respuesta para futuras referencias y casos similares.

Colocando #col1 antes de #col2 en el marcado, puede #col2 hacia la derecha, en caso de que tenga LTR lauout (si tiene un diseño RTL, entonces flote hacia la izquierda) y dé al otro col overflow: hidden .

Tenga en cuenta que el padre ( #content ) debe tener el overflow: hidden también:

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