Why does width in percent produce a different result than width in pixels?

Question

I have a horizontally scrolling div in the second column in my layout. For some reason, the contents of this div are stretching my page out and breaking my layout. I have identified main__listing as the offending div. To test that this was the offending div I changed the width to 10%. It shrunk the content of the div to the ridiculous size you would expect however my page was still broken. I used to Firefox dev tools to find the width in pixels (290px). Then I set the width to 290px. This fixed my page. I need the div to be fluid so this isn't a real fix but I want to know why this is.

TL;DR A div with a width set in % has a different width than one set to the same size in pixels.

CSS:

.main__listings {
  width: 100%;
}
.horizontal_scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.card {
  flex: 0 0 200px;
  margin: auto 10px;
}

HTML:

<div className="main__listings">
  <h1>Local Competitions</h1>
  <div className="horizontal_scroll">
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
  </div>
</div>

Going off your question in the title, a percent is the (Total Screen Width "Or height") * .(percent you want) so an example would be wanting an image to be 20% of the screen width. On a screen/browser window 1820 pixels wide would be **1820 * .20 = 364** Pixels wide. If you define a width with just pixels, no matter what size the screen is, it will always be the defined amount of pixels you choose. This will constantly change if you scale your screen. — GoofBall101, Dec 31 '17 at 03:21
True, however at any given screen size there is a corresponding pixel size that matches. I have a div that I have set once by percent, and then by pixel. The div size did not change with percent, but did when set by pixel. In both cases the content of the div did change. — kalm42, Dec 31 '17 at 04:19

Lakindu Gunasekara · Accepted Answer · 2017-12-31T04:44:30.727

3

Percentage will be change according to your screen size, where as pixels doesn't change according to screen and pixels are not responsive to different screen sizes.

If you want to give some value without giving percentages, you can use, "rem" units. And it is more responsive. Check out how rem units works compared to pixels.

https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

Edited => Referring the comment:

edited Dec 31 '17 at 04:44

answered Dec 31 '17 at 03:33

Lakindu Gunasekara

4,221
4
27
41

1

I'm asking why a div with a width of a percentage would not change size and only change the content of the div when setting the width by pixels would change both the size of the div and the content therein. I'm not sure of a clear way of asking such a nuanced question succinctly. – kalm42 Dec 31 '17 at 04:22
1

Checkout the images attached to the answer, to see whether we are in the same page. There are two separate images, one with pixel and one with percentage. Also you can refer the below link https://stackoverflow.com/questions/3630551/web-layouts-pixels-vs-percentages – Lakindu Gunasekara Dec 31 '17 at 04:47

Why does width in percent produce a different result than width in pixels?

1 Answers1