Copyable code - Basic layout fixes

"My layout breaks at different resolutions"

Try adding something like this to lock it to one size:


body {
  width:1904px; //any size, this one's 1920px minus space for a scrollbar
  margin:auto; //make centered in case someone has a bigger monitor
}

That won't work for everyone, since some people build their whole layout around the position property. A possible alternative fix is to add something like this:


body {
  width:1895px;
  height:957px;
  position:absolute;
}

Centered column with left-aligned text


body {
  max-width:800px; //can be resized by a smaller window
  margin:auto; //make centered
}

If you want things on the page that are outside of the column, you need to put your text in a div, and give that a max-width.

Position in center vertically and horizontally


.centerme {
  position: fixed; /*can make this position:absolute; with a position:relative; container to center relative to something within the page*/
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
}

Result: See CRT simulator.

Cover screen with a div


.cover {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Result: See Disco Inferno.

Position:relative without any empty space


.container {
  position: relative; //this is the key. The container doesn't have to move anywhere, it just has to be position:relative;
  width: 100%;
  height: 80px;
  background-color: black;
}
.moverelative {
  position: absolute;
  top: 20px;
  left: 120px;
}


<div class="container"><p class="moverelative">Move this text relative to container</p></div>

Result:

Move this text relative to container