Quiero poner dos <div>
s uno al lado del otro. El <div>
derecho es de unos 200px; y el <div>
izquierdo debe llenar el resto del ancho de la pantalla? ¿Cómo puedo hacer esto?
Puedes utilizar flexbox para distribuir tus elementos:
-- begin snippet: js hide: false -->
#parent {
display: flex;
}
#narrow {
width: 200px;
background: lightblue;
/* Just so it's visible */
}
#wide {
flex: 1;
/* Grow to rest of container */
background: lightgreen;
/* Just so it's visible */
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>
Fin del fragmento;
Esto es básicamente sólo raspando la superficie de flexbox. Flexbox puede hacer cosas bastante sorprendentes.
Para los navegadores más antiguos, puedes usar las propiedades CSS float y width para solucionarlo.
-- begin snippet: js hide: false -->
#narrow {
float: right;
width: 200px;
background: lightblue;
}
#wide {
float: left;
width: calc(100% - 200px);
background: lightgreen;
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>
...fin del fragmento..;
Desafortunadamente, esto no es algo trivial de resolver para el caso general. Lo más fácil sería añadir una propiedad css-style "float: right;" a su 200px div, sin embargo, esto también causaría su "main"-div para ser en realidad de ancho completo y cualquier texto en ella flotaría alrededor del borde de la 200px-div, que a menudo se ve raro, dependiendo del contenido (más o menos en todos los casos, excepto si & #39; s una imagen flotante).
EDITAR:EDITAR: Como sugirió Dom, el problema de la envoltura podría resolverse, por supuesto, con un margen. Qué tonta soy.
Parafraseando a uno de mis sitios web que hace algo similar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style TYPE="text/css"><!--
.section {
_float: right;
margin-right: 210px;
_margin-right: 10px;
_width: expression( (document.body.clientWidth - 250) + "px");
}
.navbar {
margin: 10px 0;
float: right;
width: 200px;
padding: 9pt 0;
}
--></style>
</head>
<body>
<div class="navbar">
This will take up the right hand side
</div>
<div class="section">
This will fill go to the left of the "navbar" div
</div>
</body>
</html>