CSS Ignore one element when determining parent size [duplicate]

Question

Basically, how can I achieve this:

<div id="outerDiv">
    <div class="ignoreWidth" style="width: 20px;">20px</div>
    <div style="width: 4px;">4px</div>
    <div style="width: 8px;">8px</div>
</div>
<!-- outerDiv.style.width == 8px -->

Without hard-coding the width for the outer div.

Edit: The position: absolute worked for fixing the width problem, but then all the other elements are moved under it. Is there any way to avoid that without padding?

Answer 1

make the css position attribute for outerDiv relative and the position for the class ignoreWidth absolute and set to 0, 0

this should position the first inner div in the top left of the outer div and use it's own height and width properties

in your css file for this page:

#outerDiv {
  position:relative;
}
.ignoreWidth {
  position:absolute;
  top: 0;
  left: 0;
}

Answer 2

You can take it out of the document flow with

.ignoreWidth{
  position:absolute;
}

.

https://developer.mozilla.org/en-US/docs/Web/CSS/position