I've set the display property to inline-block, but the htmlDiv div in this code snippet is not behaving as expected. It's acting as though the inner divs are next to each other even when they're not. How can I fix this?
If it's unclear, please run the animated snippet...
var demoContainer = d3.select('#demoContainer').style('width', '100px')
function tick() {
demoContainer.transition().duration(4000).style('width', '400px')
.transition().duration(4000).style('width', '600px')
.transition().duration(3000).style('width', '400px')
.transition().duration(3000).style('width', '100px')
.each('end', tick);
};
tick();#htmlDiv {
font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
font-size: 12px;
outline: solid 1px black;
background-color: rgba(0, 0, 0, 0.25);
display: inline-block;
position: relative;
}
.container {
height: auto;
width: 100%;
display: inline-block;
position: relative;
}
.bubbles,
.subBubbles,
.span {
color: #ccc;
}
.select-bubbles,
.bubbles {
padding: 5px;
margin: 3px;
outline: solid 1px white;
background-color: rgb(114, 114, 114);
width: 150px;
display: inline-block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="demoContainer" style="outline: solid 3px red; padding: 10px">
<div id="htmlDiv">
I want this outer div to shrink-wrap the 4 inner divs regardless of width... <br>
<div class="container">
<div class="select-bubbles">
<select class="selector">
<option value="select">select</option>
<option value="selectAll">selectAll</option>
</select>
<select id="multi-single">
<option value="4">multi</option>
<option value="1">single</option>
</select>
<div class="select-subBubbles">
<select class="selector">
<option value="select">select</option>
<option value="selectAll" selected="selected">selectAll</option>
</select>
<span class="select-spans">
<select class="selector">
<option value="select">select</option>
<option value="selectAll">selectAll</option>
</select>
</span>
</div>
</div>
</div> <br>
<div class="bubbles bubble1">
bubble1
<div class="subBubbles bubble1">
<span>sub1</span>
<span class="spans bubble1">
<span style="transform: rotateX(0deg); color: rgb(0, 0, 0);" class="temp">
sub1
</span> subsub1
</span>
<span class="spans bubble2">subsub2</span>
</div>
<div class="subBubbles bubble2">
<span>
sub2
</span>
<span class="spans bubble1">
<span class="temp">
sub2
</span>
subsub1
</span>
</div>
</div>
<div class="bubbles bubble2">
bubble2
<div class="subBubbles bubble1">
sub1
<span class="spans bubble1">subsub1</span>
<span class="spans bubble2">subsub2</span>
</div>
<div class="subBubbles bubble2">
sub2
<span class="spans bubble1">subsub1</span>
<span class="spans bubble2">subsub2</span>
</div><div class="subBubbles bubble3">
sub3
<span class="spans bubble1">
subsub1
</span>
<span class="spans bubble2">
subsub2
</span>
</div>
</div>
<div class="bubbles bubble2">
bubble2
<div class="subBubbles bubble1">
sub1
<span class="spans bubble1">subsub1</span>
<span class="spans bubble2">subsub2</span>
</div>
<div class="subBubbles bubble2">
sub2
<span class="spans bubble1">subsub1</span>
<span class="spans bubble2">subsub2</span>
</div><div class="subBubbles bubble3">
sub3
<span class="spans bubble1">
subsub1
</span>
<span class="spans bubble2">
subsub2
</span>
</div>
</div>
</div>
</div>