Ik wil twee <div>
s naast elkaar zetten. De rechter <div>
is ongeveer 200px; en de linker <div>
moet de rest van de schermbreedte opvullen? Hoe kan ik dit doen?
Je kunt flexbox gebruiken om je items op te maken:
#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>
Dit is eigenlijk slechts het oppervlak van flexbox schrapen. Flexbox kan verbazingwekkende dingen doen.
Voor oudere browsers kun je CSS float en een width eigenschappen gebruiken om het op te lossen.
#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>
Helaas is dit niet een triviale zaak om op te lossen voor het algemene geval. Het makkelijkste zou zijn om een css-style eigenschap "float: right;" toe te voegen aan je 200px div, maar dit zou er ook voor zorgen dat je "main"-div eigenlijk volle breedte zou zijn en elke tekst daarin zou rond de rand van de 200px-div zweven, wat er vaak raar uitziet, afhankelijk van de inhoud (vrijwel in alle gevallen behalve als het een zwevende afbeelding is's).
EDIT: Zoals Dom al suggereerde, zou het wrapping probleem natuurlijk opgelost kunnen worden met een marge. Dom van me.
Om een van mijn websites te parafraseren die iets soortgelijks doet:
<!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>