div display inline-block not working as expected for this scenario

Question

I've created the following widget with divs and scss:

<div id="MapKeys">
  <div id="RegionalSupply">
    <div>Regional supply</div>
    <div class="circle"></div>
    <div class="display inlineBlock">Circles sized by the amount of change from the previous period</div>
  </div>
</div>

#MapKeys
{
    .circle 
    {
        width: 20px;
        height: 20px;
        background: lightgrey;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
      display:inline-block;
    }

    .display
    {
        &.inlineBlock{ display: inline-block }
    }

    #RegionalSupply{

          height:100px;
          width:220px;
          border:solid purple 1px;
        display:inline-block;
        padding:10px;
    }
}

The 1st row is the header
The 2nd row starts with a small circle which serves as a symbol
The 3rd row describes the context of the circle symbol

My intent is to get the text on the 3rd row to display next to the circle on the 2nd row. The css display for the divs on the 2nd and 3rd rows is set to inline-block. Therefore, I would expect that the div with text on the 3rd row would display directly to the right of the div with the circle on the 2nd row. Any idea what the problem might be here?

display the text as inline – Brian McCall Mar 17 '17 at 21:29 — Brian McCall, Mar 17 '17 at 21:29

score 0 · Accepted Answer · answered Mar 17 '17 at 21:26

0

You need to set a width to .display .inlineBlock so that it will fit within the container.

http://codepen.io/anon/pen/GWygPX

answered Mar 17 '17 at 21:26

Wes Foster

8,770
5
42
62

score 0 · Answer 2 · answered Mar 17 '17 at 21:34

Use width: calc(100% - 20px); on the text and remove the white space between those 2 elements in the HTML so they'll fit on the same line.

#MapKeys .circle {
  width: 20px;
  height: 20px;
  background: lightgrey;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  display: inline-block;
}
#MapKeys .display.inlineBlock {
  display: inline-block;
  width: calc(100% - 20px);
}
#MapKeys #RegionalSupply {
  height: 100px;
  width: 220px;
  border: solid purple 1px;
  display: inline-block;
  padding: 10px;
}

<div id="MapKeys">
  <div id="RegionalSupply">
    <div>Regional supply</div>
    <div class="circle"></div><div class="display inlineBlock">Circles sized by the amount of change from the previous period</div>
  </div>
</div>

div display inline-block not working as expected for this scenario

2 Answers2