divs inside span Change height of parent element

Question

I have created a little square grid of svg icons, and am placing them immediately to the right of some text in a header.

The grid has been created like below:

<div>HEADER TEXT    
  <span>
    <div>
      <svg></svg>
      <svg></svg>
    </div>
    <div>
      <svg></svg>
      <svg></svg>
    </div>
  </span>
</div>

The span css is:

display: inline-block;

Now this all works fine and dandy, except for the fact that the div that contains this grid of icons, grows by the height of one of the divs.

ie. if the div that contains a row of icons is 20px tall, the outer div grows in height, from 70px say, to 90px.

I take it that this is due to the divs being stacked.

Setting the height to explicitly stay at 70px, say, doesn't do the trick as things just get shifted down and stick out of the div.

Is there anyway to suppress this behaviour? Or is there another less 'hacky' way to implement the grid of icons that won't run into this problem?

I've made a nice little plnkr to show exactly how this is going wrong....

http://plnkr.co/edit/IcXkse4XLnDI83OQ7G4S

Answer 1

An immediate fix is to add font-size: 0; to .share-square-div. This fixes the issue because .share-square-div is inheriting font-size: 62px; from .header and your SVG's are display: inline; by default. So the browser treats the SVG's as if they're text, expanding .share-square-div as if it contains text. But since it has height set on it, the SVG's are overflowing it.

I added a crude demo below.

var $button = $('#button');
var $shareSquareDiv = $('.share-square-div');
var step = 0;

$button.on('click', cycleExample);
cycleExample();

function cycleExample() {
  switch (step) {
    case 0:
      $button.text('hide overflow on .share-square-div');
      $shareSquareDiv.each( function() {
        $(this).css('background-color', 'orange');
        $(this).css('font-size', '');
      });
      break;
    case 1:
      $button.text('set height to auto on .share-square-div');
      $shareSquareDiv.each( function() {
        $(this).css('overflow', 'hidden');
      });
      break;  
    case 2:
      $button.text('reset height to 20px and set font-size to 0');
      $shareSquareDiv.each( function() {
        $(this).css('height', 'auto');
        $(this).css('overflow', '');
      });
      break;  
    case 3:
      $button.text('success! restart demo');
      $shareSquareDiv.each( function() {
        $(this).css('height', '');
        $(this).css('font-size', '0');
        $(this).css('background-color', '');
      });
      step = -1;
      break;
  }
  
  step++;
}

/* Styles go here */
.share-square-span {
	display: inline-block;
}

.share-square-div {
	height: 20px;
  
    /* ===add this=== */
    /* font-size: 0; */
    /* ============== */
}

.share-icon {
	margin-right: 4px;
}


.header {
	font-size: 62px;
	font-weight: 300;
	text-align: center;
}

.fixed-height-header {
  height: 71px;
  font-size: 62px;
	font-weight: 300;
	text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button"></button>
<div class="header" style="background:blue;">First Header</div>

    
    <div class="header" style="background:yellow;"><span>Second Header</span>
    
    	<span class="share-square-span">
		
  			<div class="share-square-div"><!-- 
  				
  				--><svg class="share-icon" enable-background="new 0 0 266.893 266.895" height="16px" id="Layer_1" version="1.1" viewBox="0 0 266.893 266.895" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        				<path d="M248.082,262.307c7.854,0,14.223-6.369,14.223-14.225V18.812  c0-7.856-6.368-14.224-14.223-14.224H18.812c-7.856,0-14.224,6.367-14.224,14.224v229.271c0,7.854,6.366,14.225,14.224,14.225  H248.082z" fill="#3C5A99" id="Blue_1_"/>
        				<path d="M185.076,246.307v-99.803h33.499l5.016-38.896h-38.515V82.777c0-11.261,3.127-18.935,19.274-18.935  l20.596-0.009V29.045c-3.562-0.475-15.787-1.533-30.012-1.533c-29.694,0-50.024,18.126-50.024,51.413v28.684h-33.585v38.896h33.585  v99.803H185.076z" fill="#FFFFFF" id="f"/>
      			</svg><!--
      
      			--><svg class="share-icon" enable-background="new 0 0 64 64" height="16px" id="Layer_1" version="1.1" viewBox="0 0 64 64" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  					<path d="M62.967,52.35c0,5.863-4.753,10.617-10.618,10.617H11.65c-5.863,0-10.617-4.754-10.617-10.617v-40.7  c0-5.863,4.753-10.617,10.617-10.617h40.699c5.864,0,10.618,4.753,10.618,10.617V52.35z" fill="#60A8DC"/>
  					<g id="XMLID_1_"><g><path d="M5.515,48.65c0.846,0.104,1.713,0.154,2.59,0.154c5.098,0,9.783-1.744,13.488-4.653    c-4.757-0.094-8.762-3.23-10.145-7.554c0.671,0.134,1.352,0.196,2.054,0.196c0.991,0,1.94-0.134,2.858-0.382    c-4.984-1.001-8.72-5.387-8.72-10.66c0-0.041,0-0.083,0-0.134c1.465,0.815,3.137,1.3,4.922,1.362c-2.91-1.95-4.83-5.273-4.83-9.05    c0-1.992,0.537-3.86,1.465-5.459c5.366,6.573,13.374,10.897,22.404,11.351c-0.186-0.794-0.279-1.62-0.279-2.477    c0-6.006,4.861-10.866,10.856-10.866c3.137,0,5.964,1.321,7.946,3.426c2.477-0.485,4.799-1.383,6.904-2.631    c-0.805,2.539-2.528,4.665-4.788,6.016c2.208-0.268,4.293-0.856,6.253-1.713c-1.455,2.177-3.302,4.086-5.428,5.624    c0.011,0.464,0.021,0.939,0.021,1.404c0,14.365-10.918,30.927-30.907,30.927C16.041,53.531,10.313,51.735,5.515,48.65z" fill="#FFFFFF"/></g><g/></g>
  				</svg>
  				
  			</div>
  		
  			<div class="share-square-div"><!--
  			
  				--><svg class="share-icon" enable-background="new -16 -16 64 64" height="16px" id="Layer_1" version="1.1" viewBox="-16 -16 64 64" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  					<path d="M47.083,35.427c0,6.438-5.219,11.656-11.656,11.656H-3.427c-6.438,0-11.656-5.219-11.656-11.656V-3.427  c0-6.438,5.219-11.656,11.656-11.656h38.854c6.438,0,11.656,5.219,11.656,11.656V35.427z" fill="#D93725"/>
  					<g>
  						<path d="M16.724,20.112c-1.528-1.079-4.444-3.705-4.444-5.251c0-1.809,0.518-2.7,3.239-4.828   c2.789-2.182,4.77-5.755,4.77-9.326c0-4.244-1.896-6.848-5.444-10.254h5.354l3.778-1.703c0,0-12.662,0-16.884,0   c-7.571,0-14.691,5.726-14.691,12.365c0,6.79,5.158,12.265,12.859,12.265c0.535,0,1.056-0.014,1.565-0.048   c-0.501,0.955-0.856,2.03-0.856,3.149c0,1.886,1.016,3.416,2.296,4.666c-0.966,0-1.904,0.027-2.924,0.027   c-9.38,0-16.592,5.968-16.592,12.161c0,6.094,7.91,9.914,17.283,9.914c10.688,0,16.589-6.067,16.589-12.164   C22.624,26.194,21.181,23.272,16.724,20.112z M7.703,11.653c-4.351-0.13-8.482-4.866-9.234-10.574   C-2.279-4.636,0.636-9.007,4.982-8.878c4.35,0.133,8.483,4.715,9.236,10.427C14.969,7.263,12.051,11.783,7.703,11.653z    M5.999,40.549c-6.48,0-11.16-4.098-11.16-9.027c0-4.829,5.804-8.85,12.285-8.778c1.513,0.02,2.922,0.258,4.199,0.676   c3.518,2.446,6.042,3.832,6.759,6.613c0.129,0.567,0.203,1.152,0.203,1.746C18.285,36.699,15.11,40.549,5.999,40.549z" fill="#FFFFFF"/><polygon fill="#FFFFFF" points="34.732,12.594 34.732,4.078 31.327,4.078 31.327,12.594 22.812,12.594 22.812,16 31.327,16    31.327,24.515 34.732,24.515 34.732,16 43.25,16 43.25,12.594  "/>
  					</g>
  				</svg><!--
  
  				--><svg class="share-icon" height="16px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  					<path d="M456,506H56c-27.617,0-50-22.393-50-50V56  C6,28.383,28.383,6,56,6h400c27.618,0,50,22.383,50,50v400C506,483.607,483.618,506,456,506z M214.213,259.408  c0-0.762-0.195-1.475-0.224-2.227l98.73-54.814c9.649,8.135,21.953,13.232,35.576,13.232c30.655,0,55.498-24.843,55.498-55.488  c0-30.654-24.843-55.498-55.498-55.498c-30.654,0-55.498,24.844-55.498,55.498c0,2.832,0.43,5.557,0.84,8.272l-94.922,52.705  c-10.097-10.537-24.248-17.168-40-17.168c-30.644,0-55.488,24.844-55.488,55.488c0,30.654,24.844,55.498,55.488,55.498  c15.264,0,29.073-6.172,39.102-16.142l95.176,52.851c1.035,29.736,25.312,53.565,55.302,53.565  c30.655,0,55.498-24.844,55.498-55.499c0-30.644-24.843-55.488-55.498-55.488c-17.08,0-32.177,7.891-42.353,20.03l-92.1-51.133  C213.93,261.849,214.213,260.668,214.213,259.408z" id="share_1_" style="fill-rule:evenodd;clip-rule:evenodd;fill:grey;"/>
  				</svg>
  
  			</div>
		
		  </span>

    <div class="fixed-height-header" style="background:green;"><span>Third Header</span>
    
    	<span class="share-square-span">
		
  			<div class="share-square-div"><!-- 
  				
  				--><svg class="share-icon" enable-background="new 0 0 266.893 266.895" height="16px" id="Layer_1" version="1.1" viewBox="0 0 266.893 266.895" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        				<path d="M248.082,262.307c7.854,0,14.223-6.369,14.223-14.225V18.812  c0-7.856-6.368-14.224-14.223-14.224H18.812c-7.856,0-14.224,6.367-14.224,14.224v229.271c0,7.854,6.366,14.225,14.224,14.225  H248.082z" fill="#3C5A99" id="Blue_1_"/>
        				<path d="M185.076,246.307v-99.803h33.499l5.016-38.896h-38.515V82.777c0-11.261,3.127-18.935,19.274-18.935  l20.596-0.009V29.045c-3.562-0.475-15.787-1.533-30.012-1.533c-29.694,0-50.024,18.126-50.024,51.413v28.684h-33.585v38.896h33.585  v99.803H185.076z" fill="#FFFFFF" id="f"/>
      			</svg><!--
      
      			--><svg class="share-icon" enable-background="new 0 0 64 64" height="16px" id="Layer_1" version="1.1" viewBox="0 0 64 64" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  					<path d="M62.967,52.35c0,5.863-4.753,10.617-10.618,10.617H11.65c-5.863,0-10.617-4.754-10.617-10.617v-40.7  c0-5.863,4.753-10.617,10.617-10.617h40.699c5.864,0,10.618,4.753,10.618,10.617V52.35z" fill="#60A8DC"/>
  					<g id="XMLID_1_"><g><path d="M5.515,48.65c0.846,0.104,1.713,0.154,2.59,0.154c5.098,0,9.783-1.744,13.488-4.653    c-4.757-0.094-8.762-3.23-10.145-7.554c0.671,0.134,1.352,0.196,2.054,0.196c0.991,0,1.94-0.134,2.858-0.382    c-4.984-1.001-8.72-5.387-8.72-10.66c0-0.041,0-0.083,0-0.134c1.465,0.815,3.137,1.3,4.922,1.362c-2.91-1.95-4.83-5.273-4.83-9.05    c0-1.992,0.537-3.86,1.465-5.459c5.366,6.573,13.374,10.897,22.404,11.351c-0.186-0.794-0.279-1.62-0.279-2.477    c0-6.006,4.861-10.866,10.856-10.866c3.137,0,5.964,1.321,7.946,3.426c2.477-0.485,4.799-1.383,6.904-2.631    c-0.805,2.539-2.528,4.665-4.788,6.016c2.208-0.268,4.293-0.856,6.253-1.713c-1.455,2.177-3.302,4.086-5.428,5.624    c0.011,0.464,0.021,0.939,0.021,1.404c0,14.365-10.918,30.927-30.907,30.927C16.041,53.531,10.313,51.735,5.515,48.65z" fill="#FFFFFF"/></g><g/></g>
  				</svg>
  				
  			</div>
  		
  			<div class="share-square-div"><!--
  			
  				--><svg class="share-icon" enable-background="new -16 -16 64 64" height="16px" id="Layer_1" version="1.1" viewBox="-16 -16 64 64" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  					<path d="M47.083,35.427c0,6.438-5.219,11.656-11.656,11.656H-3.427c-6.438,0-11.656-5.219-11.656-11.656V-3.427  c0-6.438,5.219-11.656,11.656-11.656h38.854c6.438,0,11.656,5.219,11.656,11.656V35.427z" fill="#D93725"/>
  					<g>
  						<path d="M16.724,20.112c-1.528-1.079-4.444-3.705-4.444-5.251c0-1.809,0.518-2.7,3.239-4.828   c2.789-2.182,4.77-5.755,4.77-9.326c0-4.244-1.896-6.848-5.444-10.254h5.354l3.778-1.703c0,0-12.662,0-16.884,0   c-7.571,0-14.691,5.726-14.691,12.365c0,6.79,5.158,12.265,12.859,12.265c0.535,0,1.056-0.014,1.565-0.048   c-0.501,0.955-0.856,2.03-0.856,3.149c0,1.886,1.016,3.416,2.296,4.666c-0.966,0-1.904,0.027-2.924,0.027   c-9.38,0-16.592,5.968-16.592,12.161c0,6.094,7.91,9.914,17.283,9.914c10.688,0,16.589-6.067,16.589-12.164   C22.624,26.194,21.181,23.272,16.724,20.112z M7.703,11.653c-4.351-0.13-8.482-4.866-9.234-10.574   C-2.279-4.636,0.636-9.007,4.982-8.878c4.35,0.133,8.483,4.715,9.236,10.427C14.969,7.263,12.051,11.783,7.703,11.653z    M5.999,40.549c-6.48,0-11.16-4.098-11.16-9.027c0-4.829,5.804-8.85,12.285-8.778c1.513,0.02,2.922,0.258,4.199,0.676   c3.518,2.446,6.042,3.832,6.759,6.613c0.129,0.567,0.203,1.152,0.203,1.746C18.285,36.699,15.11,40.549,5.999,40.549z" fill="#FFFFFF"/><polygon fill="#FFFFFF" points="34.732,12.594 34.732,4.078 31.327,4.078 31.327,12.594 22.812,12.594 22.812,16 31.327,16    31.327,24.515 34.732,24.515 34.732,16 43.25,16 43.25,12.594  "/>
  					</g>
  				</svg><!--
  
  				--><svg class="share-icon" height="16px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  					<path d="M456,506H56c-27.617,0-50-22.393-50-50V56  C6,28.383,28.383,6,56,6h400c27.618,0,50,22.383,50,50v400C506,483.607,483.618,506,456,506z M214.213,259.408  c0-0.762-0.195-1.475-0.224-2.227l98.73-54.814c9.649,8.135,21.953,13.232,35.576,13.232c30.655,0,55.498-24.843,55.498-55.488  c0-30.654-24.843-55.498-55.498-55.498c-30.654,0-55.498,24.844-55.498,55.498c0,2.832,0.43,5.557,0.84,8.272l-94.922,52.705  c-10.097-10.537-24.248-17.168-40-17.168c-30.644,0-55.488,24.844-55.488,55.488c0,30.654,24.844,55.498,55.488,55.498  c15.264,0,29.073-6.172,39.102-16.142l95.176,52.851c1.035,29.736,25.312,53.565,55.302,53.565  c30.655,0,55.498-24.844,55.498-55.499c0-30.644-24.843-55.488-55.498-55.488c-17.08,0-32.177,7.891-42.353,20.03l-92.1-51.133  C213.93,261.849,214.213,260.668,214.213,259.408z" id="share_1_" style="fill-rule:evenodd;clip-rule:evenodd;fill:grey;"/>
  				</svg>
  
  			</div>
		
		  </span>
    </div>

Answer 2

By default, divs are display:block. You'll need to override that for your divs with either display:inherit or display:inline assigned to them.

<style>
    div {display:inline}
</style>
<span>
    <div>row 1, cell 1</div>
    <div>row 1, cell 2</div>
</span>

If you want to make sure they all have the same width regardless of content:

<style>
   div{ display: inline; overflow: hidden; width: 20px, height: 20px }
</style>

You could use a table to make this easier, but it will not scale well on all screen resolutions.