CSS Layout Basics

A quick overview of basic CSS properties used for layout. For more in-depth explanations and demonstrations, refer to Learn CSS Layout.

Defaults
Margins & Padding
Box Model
Float, No Clear
Float With Clear
Display
Position
Nested Position
Z Index
Overflow

Browser Defaults

HTML stands for Hyper Text Markup Language. This means that, when we mark up our document in a certain way, the browser (Safari, Chrome, Firefox) knows how and where to apply certain styles. HTML has a default styling which usually involves type based on 12pt Times, ~8px margins and padding on the document body, etc.

Sometimes it's useful to reset the default states. There are many ways to reset browser default styling (and also many elements and properties to be reset). Here, we'll just talk about the body margins and padding, and about the box model.

Margins & Padding

By default, browsers adds a small margin or padding to the document body. There are times we want the document body to have different amounts or no extra space around it. To do this, we set the margins and padding on the body and html to 0:

	html,
	body {
	    margin: 0;
	    padding: 0;
	}

Toggle the margins on this document:
Toggle Body Margins

Box Model

The box model is the way the browser calculates and renders the width of an element. This means: content + padding + border.

By default, the browser will add padding and borders to the overall size of an element. If you have a div with a width of 200px, 20px padding, and a 2px border, that div will actually have a total width of 244px:

	L border (2px)
	+ L padding (20px)
	+ content (200px)
	+ R padding (20px)
	+ R border (2px)
	__________________
	TOTAL = 244px

Not very intuitive. We can change the way these are added up by specifying which box model to use. We do this by setting the box sizing property on all elements using the universal CSS selector, like this:

	* {
	    box-sizing: border-box;
	}

This tells the browser that we want the width of our element to be the sum of all its properties: content + padding + border = width. Now, the size of our element will be calculated backwards from 200, like this:

	L border (2px)
	+ L padding (20px)
	+ content (156px)
	+ R padding (20px)
	+ R border (2px)
	__________________
	TOTAL = 200px

Toggle the box sizing used on this div to see the difference between default box sizing and border-box:
Toggle Box Sizing

Float, No Clear

Elements with float left or right will "float" towards the upper left– or right-hand corner of their container. Non-floated elements that follow floated elements will also float upwards. Floated elements are not visibly held by their containers. Even the title and horizontal rule below are disrupted by these floated elements.

	.float-left {
	    float: left;
	}
	.float-right {
	    float: right;
	}

Some Un-cleared Content

Float With Clear

Clear acts like a "weight", holding down the bottom edge of the container.

	.clear {
	    clear: both;
	}

Display

Different elements display differently. By default, most elements either display as blocks or inline. For example: paragraph tags display as blocks, spans inside the paragraphs display inline.

The main difference to note between display:inline and float:left is that elements set to display inline will wrap to a new line, like words do, along a shared baseline. Block-level elements (such as divs, paragraphs and headers) with the float property will maintain their box-like shape while floating to the left or right.

This is a paragraph. By default, paragraphs, headers, and divs display as blocks.

This is a default span tag. By default, span tags, images, and links display inline. The important thing to note about inline is that it means things will sit along a shared baseline. Toggle the display of this span between inline (default) and block: Toggle Display

You can change the way an element is displayed by using the display property:

Position

The CSS position property can be used to position elements with respect to the browser window or their containers.

Fixed elements stay put within the browser window. They do not scroll with content. You must define the location of fixed elements within the window in order for them to be visible. The div in the bottom right-hand corner has "bottom" and "right" properties with values of 0. "top", "right", "bottom", and "left" define an element's offset from the edges of the browser window:

	.fixed-div {
	    position: fixed;
	    bottom: 0;
	    right: 0;
	}

Nested Position

By combining and nesting variously positioned elements, you can create more complex layouts. All 3 of the absolutely positioned divs share the same CSS properties:

	.absolute-divs {
	    width: 90%;
	    left: 5%;
	    height: 70%;
	    top: 15%;
	}

To create the composition below, you need to set the outer two containers' positions to relative. You also need to specify a height and/or width on the container. Toggle the height of the container to see what happens:
Toggle Height

Z Index

The CSS z-index property allows you to position elements along the z-axis. In other words: you can stack elements on top of one another. Elements with a higher z-index are closer to the front.

	.foreground {
	    z-index: 10;
	}
	.middleground {
	    z-index: 5;
	}
	.background {
	    z-index: 0;
	}

Toggle the z-index of the background div:
Toggle z-index

Overflow

Using the CSS overflow property, you can tell a container to hide or scroll any overflowed content. The overflow property is best used on elements with a specified width.

	.hide-overflow {
	    overflow: hidden;
	}
	.scroll-vertically {
	    overflow-y: scroll;
	}
	.scroll-horizontally {
	    overflow-x: scroll;
	}

It's useful to define overflow handling on elements whose content spills out beyond the edges. Toggle the height and overflow handling of the container below:
Toggle Height Scroll Vertically

You can use the overflow on any type of content. Toggle the overflow handling of the image container below: Hide Overflow