que quiero lograr esto:¿Cómo colocar dos divs uno al lado del otro donde el segundo ancho es 100%?
width=60px width = remaining space
|------| |-----------------------------------|
| div1 | | Loren ipsun... |
|------| | |
| div2 |
|-----------------------------------|
¿Es posible colocar dos divs lado a lado dejando el segundo div con todo el espacio restante?
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 width CSS en el div sólo se aplica a los contenidos, por lo que necesita para establecer el margin-left a ser la suma de los width, border, margin y padding propiedades del primer div.
Here es la versión actualizada de su jsfiddle. Avíseme si tiene alguna pregunta al respecto.
Así es cómo se hará:
.image {
background:green;
color:green;
height:60px;
position:absolute;
width:60px;
}
.content {
background:blue;
color:white;
margin-left:60px;
}
Debe eliminar el 'ancho: 100%;' de '.content'; de lo contrario, el contenido bloqueará tamaño de la ventana gráfica, lo que hace que el ancho total de todo el contenido sea mayor que la ventana gráfica, por lo que aparecerá una barra de desplazamiento horizontal. – AgentConundrum
sí, tienes razón! .. solucionado –
cuando utilizas la posición absoluta, debes establecer la posición de div principal en relativa para IE7. – Fatih
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 (Es jugar hasta en el momento)
Espero que esto ayude!
Prueba esto:
margen
<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 62px es para evitar la superposición del 1 px extra de cada frontera.
otra opción es utilizar la propuesta flexible box model
este trabajo está apoyado en el reciente Firefox, Chrome y Safari.
que puede ser portado a los navegadores no compatibles utilizando flexie.js.
hay una nueva manera de organizar los elementos CSS3 whit Marque aquí esta página Flexbox Froggy, un juego en el que ayudar Froggy amigos y escribiendo código CSS!
Guíaesta rana a la lilypad a la derecha utilizando la propiedad justificar en el contenido, que se alinea artículos horizontal y acepta los valores siguientes:
Estaba usando 'display: inline-block'. Supongo que esto fue un desastre. Esto funciona, gracias. – BrunoLM
yup que no funcionará –
Solo tenga cuidado con esos dos divs y no agregue relleno o bordes a ellos. Si debe poner contenedores en ellos. – Nux