Hacker News new | ask | show | jobs
by dmlittle 2081 days ago
Since the element you're trying to apply the full-bleed to lives in a container that has a max-width, wouldn't you need to play with negative margins or absolute positioning to accomplish this with only margins?
3 comments

I guess it's time for bettermotherfuckingwebsite.com gridless version to hit HN :)

This is not really CSS magic:

  main>*{max-width:65ch;margin: 1em auto}
  .full-bleed{width:100%;max-width:none}
Here’s an example on my site: https://chrismorgan.info/blog/rust-fizzbuzz/

That’s left-aligned (margin-left: 0; margin-right: 0) rather than centre-aligned (margin-left: auto; margin-right: auto), but it gets the point across. Headings, paragraphs, list items, &c. all get their widths constrained (deliberately to different points, in my case, which wouldn’t work if you were going centre-aligned), but figures can be full-bleed simply by not having that max-width (though in my case they still need negative side margins, but of known values).

Don't apply the max-width on the container but on selected children only.