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>