CODEWITHSUNDEEP
htmlcss
digitalzoomstudio
digitalzoomstudio

Reputation: 1132

css not calculating width correctly when children have percent assigned

This is another css weirdness..

Inline-block container will calculate width correctly when using px,vw,em etc. But not when using % measure.

percent : percent pixels ( correct ) : pixels ( correct )

HTML

    .clip{
      width: 100%; overflow:hidden;
      position:relative;
    }
    .show-width-con{
      min-width: 100%; 
      display:inline-block;
      white-space:nowrap;
    }
    .element-perc{
      width:24%;
      display:inline-block;
      vertical-align: top;
      position: relative;
    }
    
    .element-px{
      
      width:300px;
      display:inline-block;
      vertical-align: top;
      position: relative;
    }
  <div class="clip">
      <div class="show-width-con">
        <div class="element-perc">25%</div>
        <div class="element-perc">25%</div>
        <div class="element-perc">25%</div>
        <div class="element-perc">25%</div>
        <div class="element-perc">25%</div>
        <div class="element-perc">25%</div>
      </div>
    </div>
    
    <br><br>
    
    <div class="clip">
      <div class="show-width-con">
        <div class="element-px">300px</div>
        <div class="element-px">300px</div>
        <div class="element-px">300px</div>
        <div class="element-px">300px</div>
        <div class="element-px">300px</div>
        <div class="element-px">300px</div>
      </div>
    </div>

the pen is https://codepen.io/digitalzoomstudio/pen/BYWEoG

Upvotes: 0

Views: 687

Answers (2)

lkroneman
lkroneman

Reputation: 106

.clip{
  width: 100%;
  max-width: 100%;
  position:relative;
}

.show-width-con {
  font-size: 0;
  min-width: 100%; 
  max-width: 100%;
  display:inline-block;
}

.element-perc {
  font-size: 16px;
  width:25%;
  display:inline-block;
  vertical-align: top;
  position: relative;
}

.element-px{
  font-size: 16px;
  width:300px;
  display:inline-block;
  vertical-align: top;
  position: relative;
}
<div class="clip">
  <div class="show-width-con">
    <div class="element-perc">25%</div>
    <div class="element-perc">25%</div>
    <div class="element-perc">25%</div>
    <div class="element-perc">25%</div>
    <div class="element-perc">25%</div>
    <div class="element-perc">25%</div>
  </div>
</div>

<br><br>

<div class="clip">
  <div class="show-width-con">
    <div class="element-px">300px</div>
    <div class="element-px">300px</div>
    <div class="element-px">300px</div>
    <div class="element-px">300px</div>
    <div class="element-px">300px</div>
    <div class="element-px">300px</div>
  </div>
</div>

Inline-block elements contain pseudo spaces, one of the quirks still around.

Which can be solved using html comments between elements.

Or by setting the font size of the parent container to 0; and to reset the font size back in the child elements.

For creating layouts i would recommend a float grid (if you need to worry about browser support), flexbox, or css grid though.

More flexbox or css grid since you seem to want to vertically align things.

hope this helps.

Resources:

css-tricks

treehouse-post

Upvotes: 1

Pango
Pango

Reputation: 673

The 25% is 25% of the container which is 100% of the window. So, if your window is 1200px 25% of that will be 300px; 300px * 6 (the number of divs you have) = 1800px. So, you want to know why the first parent container measures 1200 and the second at 1800.

The 100% width refers to the container, not the content inside. If you take the min-width off of .show-width-con you will see that your 25% containers have no width either (because 25% of nothing is nothing). Since you have a min-width of 100%, that gives the first container a width of 1200px (which is 100%) and therefore your 25% containers are now 300px wide. And the overflow is clipped but it doesn't change the width of the holding container.

However, since it is a minimum width and not a total width, the container holding the 300px will grow to its max size which is 1800 (300 * 6). However, if you change min-width to width, you will see that this container also measures 1200px, which is 100% of the window.

Or, maybe it helps to think about it like this: It would make no sense if the parent container measured 1800px, if it did 300px would not be 25%, 450px would be. But then 450px * 6 = 2700, but 25% of 2700 is 675 and 675 * 6 = 4050, and on and on. However, no matter what your window size is, 300px is 300px.

Upvotes: 1

Related Questions