Index » Extras » Code » Basic layout
Updated 3/28/23

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 Won't work in Internet Explorer

.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>


Move this text relative to container