html - posicionar - poner dos div juntos
¿Cómo colocar dos divs de lado a lado donde el segundo ancho es 100%? (6)
Quiero lograr esto:
width=60px width = remaining space
|------| |-----------------------------------|
| div1 | | Loren ipsun... |
|------| | |
| div2 |
|-----------------------------------|
¿Es posible colocar dos divs de lado a lado dejando el segundo div con todo el espacio restante?
Aquí está:
CSS:
#container { background: silver; width: 100% }
.image
{
background: green; color: green;
width: 60px; height: 60px;
float: left;
}
.content
{
background: blue; color: white;
margin-left: 60px;
}
Y en jsFiddle (se está reproduciendo en este momento)
¡Espero que esto ayude!
Así es como se hará:
.image {
background:green;
color:green;
height:60px;
position:absolute;
width:60px;
}
.content {
background:blue;
color:white;
margin-left:60px;
}
Hay una nueva forma de organizar los elementos con CSS3. Consulta aquí esta página: ¡ Flexbox Froggy , un juego en el que ayudas a Froggy y sus amigos escribiendo código CSS!
Guía a esta rana al lilypad de la derecha usando la propiedad justify-content, que alinea los elementos horizontalmente y acepta los siguientes valores:
- inicio flexible : los artículos se alinean con el lado izquierdo del contenedor.
- extremo flexible : los artículos se alinean con el lado derecho del contenedor.
- Centro : los artículos se alinean en el centro del contenedor.
- espacio intermedio : los elementos se muestran con el mismo espacio entre ellos.
- espacio alrededor : los elementos se muestran con el mismo espacio a su alrededor.
Otra opción es utilizar el modelo de caja flexible.
esta propuesta de trabajo es compatible con Firefox, Chrome y Safari.
se puede portar a navegadores no compatibles con flexie.js.
Prueba esto:
<html> <head> <title>Tabla de contenidos - Template</title> <style type="text/css"> div { border: 1px solid #000000; } #divleft{ width: 60px; float: left; } #divright{ display: block; margin-left: 62px; } </style> </head> <body> <div id="divleft">This DIV has a width of 60px.</div> <div id="divright" >This DIV occupies the rest of the page...</div> </body> </html>
El margen de 62 píxeles es para evitar la superposición de 1 px extra de cada borde.
Simplemente haga flotar el primer div y establezca el margen izquierdo del segundo div para acomodar el ancho del primer div. Algo como esto:
div.one {
width: 60px;
float: left;
}
div.two {
margin-left: 60px;
}
Tenga en cuenta que la propiedad CSS de width en el div solo se aplica al contenido, por lo que debe establecer que el margin-left sea la suma del width , el border , el margin y las propiedades de padding del primer div.
Here está la versión actualizada de su jsfiddle. Déjame saber si tienes alguna pregunta al respecto.