Adjust the height of the parent element containing the divs nested within the span

I recently created a unique square grid of SVG icons and positioned them directly to the right of some text within a header.

The code for creating this grid looks like this:

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

Here is the CSS for the span:

display: inline-block;

Everything seems to be working well, except for one issue - the height of the outer div containing the grid increases by the height of one of the inner divs.

For example, if the icon row div is 20px tall, the parent div grows from 70px to 90px in height.

This stacking behavior seems to be causing the problem.

Even when the height is set explicitly to 70px, the icons still shift down and protrude out of the div container.

Is there a way to prevent this behavior? Or perhaps a more elegant solution to implement the grid of icons without encountering this issue?

I have created a demonstration using Plnkr to showcase this problem...

http://plnkr.co/edit/IcXkse4XLnDI83OQ7G4S

htmlcss

Answer №1

To resolve the issue, a quick solution is to include font-size: 0; in the style of .share-square-div. This solves the problem because .share-square-div is currently inheriting a font-size: 62px; from .header, and your SVG's are set to display: inline; by default. Consequently, the browser interprets the SVG's as text, causing .share-square-div to expand as though it contains text. However, with a specified height and the addition of font-size: 0;, this overflow issue can be remedied.

A demonstration illustrating this fix has been added 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-...

Answer №2

To change the default display property of divs, you can use either display:inherit or display:inline in your CSS.

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

If you want all divs to have the same width regardless of content:

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

While using a table might seem like an easier solution, it may not be optimal for all screen resolutions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch button - reveal/conceal details

I am looking for assistance in toggling the visibility of information when clicking on an arrow icon. I have attempted to use JavaScript, but it was unsuccessful. My goal is to hide the information below by clicking on the downward-facing arrow image , an ...

javascripthtmlcssangulartypescript

A challenge in web design: tackling cross-browser color discrepancies

I have implemented CSS code in an HTML page to define the color values of H1 and H2 elements. <style type="text/css"> img {border-style: none;} H1 {color: "#33CCFF"} H2 {color: "#33CCFF"} </style> While this setup works well on Internet Explo ...

htmlcsscolorscross-browser

What is the best method for eliminating tiny spaces between images that are aligned horizontally?

Check out this link for more details: . I am looking to eliminate the slim vertical gaps between the images in html5 without resorting to using the table cellpadding="0" cellspacing="0". Any ideas on how to achieve this? ...

csshtmlimage

Troubleshooting IE compatibility issues with jQuery .hide() method

I am encountering a curious issue with hiding span elements using CSS (display: none;). Upon page load, I expect the first span element to be displayed, which it does in all browsers except IE7. This anomaly has left me perplexed as there is no unusual cod ...

jquerycssxhtml

Issue with JQuery causing maxlength input not to work

Is there a way to use JQuery to set the maxlength attribute for an input[type='text'] while users are typing, so that once the max value is reached, input will stop? This is the code I have been trying: $(document).ready(function(){ $(&apos ...

jqueryhtml

What is the best way to use PHP in order to retrieve the element containing the visit ID from the specific row within an HTML table?

I am working on a project that involves populating an HTML table with data from a database. The table includes an approval button for administrators to approve visits and change their status to APPROVED. I am trying to figure out how to select the element ...

phphtmldom

What is the process for manually looping an HTML5 video on iOS 4.3/5?

I'm facing an issue with a video that has specific segments I need to be looped. The problem arises on iOS 5, where after updating videoElem.currentTime for the third time, mobile Safari stops recognizing this attribute correctly. Interestingly, on i ...

iosipadhtmlvideo

What is the best way to create a CSS class for a list element in React?

I am facing an issue with styling buttons in my UI. These buttons represent different domains and are dynamically generated based on data fetched from the server using the componentDidMount() method. Since I do not know the quantity of buttons at the time ...

javascriptcssreactjsstate

Passing parameters from HTML forms using Node.js

I'm currently facing an issue where I am trying to pass a parameter from an HTML form to a NodeJS router. The routing is working as expected, but the parameter value comes up as undefined. In the past, I have successfully passed parameters by making ...

htmlnode.jsformsexpresspost

What is the best way to clear an XML or table?

As I delve into learning Javascript, I've been experimenting with different approaches to achieve a specific functionality. I'm trying to implement a button that can toggle or hide XML data in a table. My attempts so far have involved adding anot ...

javascripthtmlxmlbuttononclick

Role-based dynamic layout

I am currently working on a website that requires user login functionality. To achieve this, I am utilizing materialise-css and Angularjs for the front-end development, while the back-end is powered by Java-Hibernate (as Spring is not an option in my case) ...

htmlcssangularjs

Steps for adding a delete icon to a text input field and enabling the functionality to delete text

In the code snippet below, I am creating a text input field: <input type="text" class="signup-input text-value" name="" placeholder="e.g. <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d48554c405d41486d">[email pro ...

javascriptjqueryhtmlcss

How do I incorporate scrolling into Material-UI Tabs?

I am currently incorporating Material-ui Tablist into my AppBar component. However, I am facing an issue with the responsiveness of the tabs. When there are too many tabs, some of them become hidden on smaller screens. For more information on the componen ...

javascriptcssreactjsmaterial-uitabs

Move the element from the center of the screen back to its starting position

Looking to craft a single animation that will transition elements from the center of the current view back to their original positions. Unfortunately, CSS animations do not support toggling the display property. This limitation causes the second rectangle ...

htmlcss

Is there a way to upload multiple files using expressjs?

I'm looking for a way to efficiently send multiple files, including an entire directory, so that I can access them in another JavaScript file called from an HTML file. const app = require("express")(); const http = require("http"). ...

javascripthtmlnode.jsexpress

Issue encountered when toggling flip switch in Jquery Mobile

I am trying to create a calculator for my app using Jquery Mobile, but I am facing an issue with the flip toggle switch. Here is my script: <script type="text/javascript"> function dosis() { $peso = $('#peso').get(0).value $dosis = ...

javascripthtmljquery-mobile

Transferring HTML table information to Django models for efficient data management

I am currently developing a student attendance management system using the Django framework. The objective is to fetch all the names of the students from the student database and display them in an HTML table. Additionally, I will be updating the informati ...

htmljquerydjangoajaxdjango-models

Problem with HTML relative paths when linking script sources

Having trouble with a website I constructed using Angular. The problem lies in the references to javascript files in index.html. The issue is that the paths in the HTML are relative to the file, but the browser is searching for the files in the root direct ...

javascripthtml

Align content distributed evenly will not display a division

I am currently using React to code and learning by doing so. I have two different images displayed, each followed by a div element with a height of 20px and a brown background color. I have set the height to "100%" and justifyContent to "space-between", bu ...

javascripthtmlcssreactjsmaterial-ui

Having an absolute element can lead to overflow causing a scroll

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .wrap { ...

htmlcsscss-positionoverflow