Je veux placer deux <div>
s l'un à côté de l'autre. Le "div" de droite fait environ 200px et le "div" de gauche doit remplir le reste de la largeur de l'écran ? Comment puis-je faire cela ?
Vous pouvez utiliser [flexbox][1] pour disposer vos éléments :
#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>
Il ne s'agit là que d'un simple aperçu de Flexbox. Flexbox peut faire des choses assez étonnantes.
Pour les navigateurs plus anciens, vous pouvez utiliser les propriétés CSS float et width pour résoudre ce problème.
#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>
Malheureusement, il n'est pas facile de résoudre ce problème dans le cas général. La solution la plus simple serait d'ajouter une propriété de style css "float : right;" ; à votre div de 200px, mais cela aurait pour conséquence que votre div "main"- serait en fait pleine largeur et que tout texte qui s'y trouverait flotterait sur le bord de la div de 200px, ce qui a souvent l'air bizarre, en fonction du contenu (à peu près dans tous les cas, sauf s'il s'agit d'une image flottante).
EDIT: Comme l'a suggéré Dom, le problème d'habillage pourrait bien sûr être résolu avec une marge. Je suis stupide.
Pour paraphraser un de mes sites web qui fait quelque chose de similaire :
<!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>