1

I'm trying to get a centered dialog-like content with minimal markup and CSS and I almost got it working with the following code (you can try it in CodePen here: https://codepen.io/rosenfeld/pen/Rxgwrq):

#container {
  display: grid;
  padding: 1em;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background-color: white;
  align-content: center;
  justify-content: center;
}

#item {
  text-align: justify;
  font-size: 20px;
  text-shadow: 1px 1px lightblue;
  max-width: 400px;
  background-color: lightyellow;
  padding: 1em;
  overflow: auto;
}

h1 { text-align: center; color: darkred; }
a { color: darkred}
<html>
  <head>
    <title>404 - Not Found</title>
  </head>
  <body>
    <div id=container >
      <div id=item>
        <h1>404</h1>
        Sorry, the page you are looking for does not exist. You may want to navigate to our <a href="/">main page</a>. If you just clicked on a broken link, please get in touch so we can fix it.
      </div>
    </div>
  </body>
</html>

The only issue I found was that the right padding of the item is not respected when the content overflows. Try shrinking the window width as much to force the horizontal scroll bar to appear and you'll notice that the item padding-right is completely ignored.

Is it possible to fix this without changing the markup or using :before and :after pseudo-selectors in the CSS?

P.S.: My first attempt to implement this was using Flexbox but I found several issues that don't seem to happen with grid layouts. For example, with Flexbox I was forced to use "margin: auto" for the item instead of the alignment properties, as they would make the top content disappear. Another difference is that with grid layout the bottom padding is respected, the only issue being the right padding (Update: in Chrome, but not in Firefox, for example, so this is not consistent among browsers). Using CSS grids allowed me to get closer to what I want with less and cleaner code when compared to using Flexbox. Also, the problem with using "margin: auto" is that you're unable to actually set up some margin to the item.

rosenfeld
  • 1,730
  • 15
  • 19
  • The same problem exists in flexbox. So the same solutions may apply. – Michael Benjamin Jan 01 '18 at 11:04
  • Not exactly, my first attempt was implementing with Flexbox, and although it's a similar problem, with Grid the bottom padding actually works. With Flexbox the same problem happened with both the right and bottom padding values. Not sure why they are different. – rosenfeld Jan 01 '18 at 16:10
  • You may want to check if the Grid behavior you describe above is consistent across browsers. – Michael Benjamin Jan 02 '18 at 21:49
  • 1
    You're right, the bottom padding is also not respected in Firefox – rosenfeld Jan 04 '18 at 11:43

1 Answers1

0

This is because the word can not be broken by a line break. And if it does not fit, part of it is on the "territory" of padding.

For exam give to .item property word-break: break-all;.

Andrei Fedorov
  • 3,689
  • 2
  • 13
  • 25
  • That makes sense, but why doesn't it scroll and keep the padding like it happens in a regular div (display: block)? – rosenfeld Jan 01 '18 at 16:14
  • At me if to give `display: block` effect the same. ff57 – Andrei Fedorov Jan 01 '18 at 16:18
  • what is the minimum width you expect? Now it is unlikely that there are devices with a screen less than 320 pixels. – Andrei Fedorov Jan 01 '18 at 16:21
  • Yes, I know it's unlikely, I'm actually asking out of curiosity in this case. For this particular case, it should fit any device, but I understand that in other scenarios, maybe when the box has an image, it would be interesting to allow it to scroll while keeping the padding working by allowing the content to be scrollable. – rosenfeld Jan 01 '18 at 16:23