why aren't these divs displayed side-by-side? - html

Question

I've created the following UI components which serve as a legend:
http://codepen.io/ac123/pen/peKgjP
<div id="MapKeys">
<div id="RegionalSupply">
<div class="header">Regional supply</div>
<div class="circle"></div>
<div class="spacer"></div>
<div class="detail">Circles sized by the amount of change from the previous period</div>
</div>
<div id="CorridorNetFlowDirection">
<div class="header">Corridor net flow direction</div>
<div class="dottedLine1">
<div class="part1"></div>
<div class="part2"></div>
<div class="part3"></div>
</div>
<div class="spacer"></div>
<div class="detail">Lines sized by the amount of change in net flow from the previous period</div>
<div class="separator"></div>
<div class="dottedLine2">
<div class="part1"></div>
<div class="part2"></div>
<div class="part3"></div>
</div>
<div class="spacer"></div>
<div class="detail">Change in flow direction</div>
</div>
</div>
</div>
#MapKeys
{
text-align:left;
height:200px;
width:260px;
display:inline-block;
vertical-align:top;
.header{
font-size:16px;
padding-bottom:6px;
}
#RegionalSupply{
border:solid lightgrey 1px;
padding:10px;
display:inline-block;
& > .circle {
vertical-align:top;
width: 14px;
height: 14px;
background: lightgrey;
position:relative;
top:2px;
display:inline-block;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
& > .spacer {
width:5px;
display:inline-block;
}
& > .detail{
width:175px;
font-size:12px;
display:inline-block;
}
}
#CorridorNetFlowDirection{
border:solid lightgrey 1px;
padding:10px;
vertical-align:top;
display:inline-block;
& > .dottedLine1
{
font-size: 0px;
position:relative;
top:4px;
height:10px;
display:inline-block;
vertical-align:top;
& > .part1{
width: 14px;
background: lightgrey;
display:inline-block;
height:10px;
}
& > .part2{
width: 3px;
background: none;
display:inline-block;
height:10px;
}
& > .part3{
width: 14px;
background: lightgrey;
display:inline-block;
height:10px;
}
}
& > .separator
{
height:1px;
}
& > .dottedLine2
{
font-size: 0px;
position:relative;
/*top:4px;*/
display:inline-block;
& > .part1{
width: 14px;
background: #077CAB;
display: inline-block;
height:10px;
}
& > .part2{
width: 3px;
background: none;
display: inline-block;
height:10px;
}
& > .part3{
width: 14px;
background: #077CAB;
display: inline-block;
height:10px;
}
}
& > .spacer {
width:5px;
display:inline-block;
}
& > .detail{
width:150px;
font-size:12px;
display:inline-block;
}
}
}
I was expecting these divs to display side-by-side b/c the parent divs and child divs are all defined with display:inline-block. How could I update my code to make these UI components display with the same with and height similar to this?:
https://www.dropbox.com/s/dhhkcx4dvczyjgx/updated-map-key.png?dl=0

Answer 1

They child divs of MapKeys are display in inline-block..It is just that width you set on MapKeys (width:260px;)that is causing the second child element to break to another line
To illustrate adjust the width of MapKeys to 2600px codepen here

Answer 2

because the parent element has the same width as child items.
#MapKeys
{
text-align:left;
height:600px; /*Increase it so that div can be side by side.*/
width:260px;
}