How to ignore a certain element when determining parent's size

Question

I have a div which is only as wide as its contents, but I\'m trying to make it so that a certain element is ignored when determining the div\'s size.

Answer 1

#parent {
  position: relative;
  display: inline-block;
}
.ignore {
  position: absolute;
}

<div id="parent">
    <div class="ignore" style="width: 20px"></div>
    <div style="width: 10px"></div>
</div>

This would do the magic. Tell me if it works;

Answer 2

Add a big negative margin to the ignore element while setting the width.

#parent {
  background:red;
  padding:5px;
  display:inline-block;
}
#parent > div {
  height:20px;
  background:blue;
  margin-bottom:5px;
}

.ignore {
  margin-right:-500px;
  
  /*to illustrate*/
  animation:change 2s linear infinite alternate;
}

@keyframes change {
  from {width:10px;}
  to {width:100px;}
}

<div id="parent">
    <div class="ignore"></div>
    <div style="width: 30px"></div>
    <div></div>
    <div style="width: 40px"></div>
    <div class="ignore"></div>
    <div style="width: 30px"></div>
</div>

Or use only the negative margin to set the width. Note that the final width will be the sum of the biggest width inside the parent + the margin you set (not only the margin)

#parent {
  background:red;
  padding:5px;
  display:inline-block;
}
#parent > div {
  height:20px;
  background:blue;
  margin-bottom:5px;
}

.ignore {
  /*to illustrate*/
  animation:change 2s linear infinite alternate;
}

@keyframes change {
  from {margin-right:-10px;}
  to {margin-right:-100px;}
}

<div id="parent">
    <div class="ignore"></div>
    <div style="width: 30px"></div>
    <div></div>
    <div style="width: 40px"></div>
    <div class="ignore"></div>
    <div style="width: 30px"></div>
</div>

Answer 3

In case you only want one of the divs to have the desired result and want the div with .ignore class to be of a higher width. You may use the below code.

HTML

<div id="parent">
  <div class="ignore">Ignore</div>
  <div style="width: 60px">Normal</div>
  <div></div>
</div>

CSS

#parent {
 background:red;
 padding:10px;
 overflow:visible;
 max-width:60px;
 }

#parent > div {
  height:20px;
  background:blue;
  margin-bottom:10px;
}

.ignore {
  width:100px;
 }

I have used the overflow:visible property and set it's max-width of 60px (which s the width of all our divs without the .ignore class.) to the parent element, and given the div with .ignore class the width of my choice.

Here is the codepen link: https://codepen.io/anon/pen/NmoVxw

Hope this helps. Thank you