Comments: The Gutenberg Layout Problem

[aristath]

Comments for The Gutenberg Layout Problem

[RMo-Sloth]

An alternative approach is old-school relative positioning of the .alignfull block.

Note that I rely on my container to handle floats opposed to applying margin: auto to center the elements inside it. So floating still works. Your solution would cause some unexpected issues when 2 floated elements follow eachother and fit in the same .container.

Did you find a better solution after your post?

.container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.container>* { /* be aware it also overrides padding for ul and ol, which are not encapsulated in blocks  */
  box-sizing: border-box;
  padding: 0 1rem;
}
.container>*.alignwide {
  width: 100%;
  padding: 0; /* alignwide eliminates the padding; Noone knows what .alignwide is formally supposed to do */
}
.container>*.alignfull {
  position: relative;
  left: calc( 50% - 50vw ); /* calculate the offset */
  width: 100vw;  /* assumed 100vh here, it can be any expression for the desired width, also update that value in left */
  padding: 0 0;
}
body { /* 100vw also includes the scrollbar, unfortunately, so hide it ( that does slice off a very small part of the .alignfull block ) */
  overflow-x: hidden;
}
.alignleft {
  float: left;
  margin: 0 0.5rem 0 0;
}
.alignright {
  float: right;
  margin: 0 0 0 0.5rem;
}
.aligncenter {
  margin:  0;
}