Ik probeer een container-div te krijgen die horizontaal voorbij de viewport schuift. Zoiets als een filmstrip op volledig scherm met #a
aan het begin en #c
aan het einde. Zowel #a
als #c
zijn div.breedtes met vaste breedte en #b
heeft een afbeelding met dynamische breedte. Het probleem dat ik ondervind, is om #container
te krijgen om de breedte dynamisch te wijzigen in #b
. Instellen van #container
breedte naar automatisch of 100% gebruikt gewoon de breedte van de viewport.
Wat ik zoek:
[- viewport width -]
--#container---------------------------------------
| -------------------------------------------- |
| | #a | #b... | #c | |
| -------------------------------------------- |
---------------------------------------------------
Mijn markup:
#container {
height:400px;
}
#a {
float:left;
width:200px;
height:400px;
}
#b {
float:left;
width:auto;
height:400px;
}
#c {
float:left;
width:200px;
height:400px;
}
<div id="container">
<div id="a">fixed width content</div>
<div id="b">dynamic width content</div>
<div id="c">fixed width content</div>
</div>
Edit: I can do this with a table, but would like to avoid that if possible.
Edit 2: Here's a working version using tables:
#container {
height:400px;
background:#fff;
}
#a {
width:200px;
height:400px;
background:#ccc;
}
#b {
height:400px;
background:yellow;
white-space: nowrap;
}
#c {
width:200px;
height:400px;
background:#ccc;
}
<table cellpadding="0" cellspacing="0">
<tr>
<td id="a">
a
</td>
<td id="b">
</td>
<td id="c">
b
</td>
</tr>
</table>