Member Avatar for dan_t

I use CSS quite a bit now, but some times I just can't place things where I want them inside the "wrapper".
Tables are easy, but make for very ugly code.
Are percenatges in CSS the way to go or should you now make tables using CSS?
Is there one way where everything doesn't change in a different browser?
Thanks

  • 2 Contributors
  • 3 Replies
  • 85 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

A few practical, modern pointers that build on what said and address s original worry about positioning and cross‑browser drift.

Use the browser's layout systems instead of table hacks: Flexbox for one‑dimensional layouts (rows or columns), Grid for two‑dimensional placements. These let you position and distribute space without brittle positioning math. Start by normalizing box sizing so widths behave predictably:

*, *::before, *::after {
  box-sizing: border-box;
}

Example patterns (short):

.container { display: flex; gap: 16px; align-items: center; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }

Quick workflow and debugging tips: 1) pick Grid for complex multi-row/column layouts, Flexbox for linear alignment; 2) set sensible minimums (flex-basis/min-width or Grid minmax) so components don't collapse or stretch oddly; 3) use the browser inspector to toggle display and show outlines to visualize boxes; 4) use @supports for feature fallbacks and a build tool like Autoprefixer when needed; 5) verify current support with Can I Use and the MDN docs linked below.

Further reading: MDN's Flexbox and Grid guides (Flexbox, Grid) and check feature coverage at Can I Use.

Recommended Answers

All 3 Replies

Member Avatar for Member #120589

Leave the tables for data.

Percentages usually work well for fluid/liquid sites. If you want your site to look exactly the same in all resolutions, including people having to scroll on smaller screens or getting lost in humungous screens, use pixels. This does not mean that %ages are the best way to go. In fact sites can look really silly when stretched to infinity on a superwide monitor. In fact you can mix 'n' match, % for some elements, static pixel dimensions for others.

The use of max-width/min-width/max-height/min-height has been the saviour of many a fluid design. These can act as constraints to avoid the ridiculous dimensions forced by both massive and tiny screens.

'em' is another measurement that you may want to look at. Very useful for fluid sites - e.g. text sizing.

If you search forums you'll probably come across heated debates wrt %/px/em/pt dimensions and fluid/fixed layouts. My answer is design the one you like. All have advantages and disadvantages. I create fluid/fixed/custom mixtures and use a variety of %/em/px. I usually avoid pt - sometimes use this in print only css files, but very rarely.

WRT browser differences. Alas there will always be browser differences. Probably 98% less is you take IE6 out of the equation.

Edited by Member #120589 because: n/a
Member Avatar for dan_t

Thank you very much for the great info!
I have used a mixture, or should I say do, but didn't know if that would be a bad pratice.

Member Avatar for Member #120589

Good man. Carry on. Half the fun of what we do is experimentation. If nobody tried to do things differently, we'd still be looking at inline width attributes. Although, come to think of it, you can use % or px (without the px suffix) there too. Anyway, seeing css inconsistencies across browsers can be a pain, but working through a solution is a buzz. Okay, gonna stop there, I sound like a geek.

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.