Eu quero colocar dois <div>
s ao lado um do outro. A direita <div>
é cerca de 200px; e a esquerda <div>
deve preencher o resto da largura da tela? Como eu posso fazer isso?
Você pode usar flexbox para dispor os seus itens:
#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>
Isto é basicamente apenas raspar a superfície da flexbox. O Flexbox pode fazer coisas incríveis.
Para suporte a navegadores mais antigos, você pode usar CSS float e uma largura propriedades para resolvê-lo.
#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>
Infelizmente, isto não é uma coisa trivial a resolver para o caso geral. A coisa mais fácil seria adicionar uma propriedade estilo css "float: right;" ao seu mergulho de 200px, no entanto, isso também faria com que o seu "main"-div fosse realmente de largura total e qualquer texto lá dentro flutuaria ao redor da borda do 200px-div, que muitas vezes parece estranho, dependendo do conteúdo (praticamente em todos os casos, exceto se for's uma imagem flutuante).
EDIT: Como sugerido por Dom, o problema de embrulho poderia, claro, ser resolvido com uma margem. Que tolice a minha.
Parafraseando um dos meus sites que faz algo semelhante:
<!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>