Member Avatar for fuston05

Just curious as to which is better to use in css ... width % or width in px?? Are there any known browser compatibility issues that might prompt a preference between the two?
Thank you in advance for you input. :)

  • 4 Contributors
  • 4 Replies
  • 179 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by fuston05

Dani AI

Generated

Short answer: there is no single "better" unit — pick the unit that matches the layout goal. Percentages (and other relative units like vw, em, rem, 1fr) make layouts flexible and responsive; pixels give predictable, pixel-perfect control for fixed-size UI elements. This complements points from , and while filling in practical details and modern best practices.

Common, useful patterns:

  • Fluid page with a max cap (keeps readability on large screens):

    .container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

  • Grid/flex columns without manual pixel math:

    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

  • Fixed-size thumbnails inside a flexible grid:

    .thumb { width: 200px; }
.thumb img { width: 100%; height: auto; display: block; object-fit: cover; }

Key gotchas and troubleshooting tips:

  • Percentage widths are calculated from the containing block, not the viewport. width:50% of an 800px parent becomes 400px.
  • Padding and borders affect final size unless box-sizing: border-box is set — using that avoids surprise overflow.
  • Sub-pixel rounding can cause 1px gaps when mixing floats and percent widths; modern layout methods (flexbox, grid) reduce that risk.
  • For typography prefer rem/em so text scales with user settings; avoid locking font-size with px if accessibility is a concern.
  • Combine units: use relative widths for responsiveness, and a max-width in px to prevent overly long lines or huge containers (Bootstrap follows this hybrid approach).

Rule of thumb: use relative units for layout and fluid behavior, cap widths with max-width in pixels when needed, and reserve pixels for small, fixed UI pieces (icons, borders, strict image crops). This balances responsiveness, accessibility, and predictable rendering across browsers.

Recommended Answers

All 4 Replies

Member Avatar for mankis

Sometimes it is better to use % sometimes px.
For example. If you wish that your div has same width as page in browser than you will use %. If you wish that your div has same width as, for example, background image you have prepared for it than you will use px. Also if you have some small div that is inside of the bigger one and you wish that smaller div has same width as bigger one you will use %. If you have thumbnails placed in divs, and you wish that all thumbnails have the same width than you will use px, and also overflow:hidden.

Member Avatar for teedoff

As far as I know, all browsers recognize percentages and pixels with no problem.

I like to use percentages for page widths and such. If not, some users can have very bad experiences visiting your site.

Member Avatar for AtomicPages

It's a matter of preference really. Sometimes px is nice because you know the unit of measure and you don't necessarily need to make any calculations. Sometimes percentages are nice because it's generally a friendlier browser experience for "liquid" layouts.

Large areas where you know you want the width to max out the parent element you can easily use width:100%; instead of calculating the number of pixels you would have to use.

Member Avatar for fuston05

Good advise! Thanks a lot. greatly appreciated :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.