- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
See: http://codepen.io/chriscoyier/pen/zlntC
If you use Firefox (tested on version 19) it doesn’t center if you add something like
width: 80%;
margin: 0 auto;
to `.page-wrap`. Does anyone have a solution to this, using CSS only (a centered wrapper would be too easy and too ugly).
Couldn’t find a solution for old syntax. Firefox 20+ is okay.
`box-align:center`?
Old syntax but who knows…I’m on FF20 here at work?
No luck @Paulie_D. @HugoGiraudel, it’s idd the old syntax that’s the problem. Only supporting new syntax halves the browser support though. I was going to implement a float fallback (can’t replicate exactly what I’m after but can come close) for browsers that don’t support flexbox anyway (using Modernizr). I’ll just have to figure out if I want to give the old flexbox supporting browsers the float treatment too, or go with the extra wrapper.
Thanks to you both.
If you actually want…
width: 80%;
margin: 0 auto;
…why not just use “margin :0 10%” for your centering? If you’re leaving exactly 20% of the containing-block width for use in margins, you can just assign 10% to either side and be done with it.
Here’s a fork of your codepen, with this added — it works for me in old version of Firefox: http://codepen.io/anon/pen/jLbeI
(See also https://bugzilla.mozilla.org/show_bug.cgi?id=701794 which covers the issue with auto margins and moz-box)
Oh yeah sorry, forgot to mention that for large screens I want the width fixed with `max-width: 75em`. Otherwise that’d be a very good point, thanks for commenting and for that link :)