Jeg ønsker å sette to <div>
s ved siden av hverandre. Den høyre <div>
er ca 200px; og den venstre <div>
må fylle opp resten av skjermbredden? Hvordan kan jeg gjøre dette?
Du kan bruke flexbox til å legge ut elementene dine:
#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>
Dette er i utgangspunktet bare å skrape overflaten av flexbox. Flexbox kan gjøre ganske fantastiske ting.
For eldre nettlesere kan du bruke CSS-egenskapene float og width for å løse problemet.
#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>
Dessverre er dette ikke en triviell ting å løse for det generelle tilfellet. Det enkleste ville være å legge til en css-stilegenskap "float: right;" til din 200px-div, men dette ville også føre til at din "main"-div faktisk er full bredde, og all tekst i den ville flyte rundt kanten av 200px-div, noe som ofte ser rart ut, avhengig av innholdet (stort sett i alle tilfeller unntatt hvis det er et flytende bilde).
EDIT: Som foreslått av Dom, kan innpakningsproblemet selvfølgelig løses med en margin. Dumme meg.
For å parafrasere et av nettstedene mine som gjør noe lignende:
<!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>