the "display" property display is CSS's most important property for controlling layout. Every element has a default display value

depending on what type of element it is. The default for most elements is usually block or inline. A block

element is often called a block-level element. An inline element is always just called an inline element.

block

div is the standard block-level element. A block-level element starts on a new line and stretches out to the left

and right as far as it can. Other common block-level elements are p and form, and new in HTML5

are header, footer, section, and more.

inline

span is the standard inline element. An inline element can wrap some text inside a paragraph <span> like

this </span> without disrupting the flow of that paragraph. Thea element is the most common inline element,

since you use them for links.

none

Another common display value is none. Some specialized elements such as scriptuse this as their

default. It is commonly used with JavaScript to hide and show elements without really deleting and

recreating them.

This is different from visibility. Setting display to none will render the page as though the element

does not exist. visibility: hidden; will hide the element, but the element will still take up the space

it would if it was fully visible.

other display values

Value set Value Description

Basic values (CSS

1)

none

Turns off the display of an element (it has no effect on layout); all

descendant elements also have their display turned off. The document is

rendered as though the element did not exist.

To render an element box's dimensions, yet have its contents be invisible,

see the visibility property.

inline The element generates one or more inline element boxes.

Value set Value Description

block The element generates a block element box.

list-item The element generates a block box for the content and a separate list-item

inline box.

Extended values

(CSS 2.1)

inline-

block

The element generates a block element box that will be flowed with

surrounding content as if it were a single inline box (behaving much like a

replaced element would)

Table model

values (CSS 2.1)

inline-

table

The inline-table value does not have a direct mapping in HTML. It

behaves like a <table> HTML element, but as an inline box, rather than a

block-level box. Inside the table box is a block-level context.

table Behaves like the <table> HTML element. It defines a block-level box.

table-

caption Behaves like the <caption> HTML element.

table-

cell Behaves like the <td> HTML element

table-

column These elements behave like the corresponding <col> HTML elements.

table-

column-

group

These elements behave like the corresponding <colgroup>HTML

elements.

table-

footer-

group

These elements behave like the corresponding <tfoot> HTML elements

table-

header-

group

These elements behave like the corresponding <thead> HTML elements

table-row Behaves like the <tr> HTML element

table-

row-group These elements behave like the corresponding <tbody> HTML elements

Flexbox model

values (CSS3)

flex The element behaves like a block element and lays out its content

according to the flexbox model.

inline-

flex

The element behaves like an inline element and lays out its content

according to the flexbox model.

Value set Value Description

Grid box model

values (CSS3)

grid

The element behaves like a block element and lays out its content

according to the grid model.

As this is experimental, most browsers don't support it. Especially pay attention

that -moz-grid is not the prefixed version of this, but a XUL layout model that

must not be used on a Web site.

inline-

grid

The element behaves like an inline element and lays out its content

according to the grid model.

Experimental

values run-in

If the run-in box contains a block box, same as block.

If a block box follows the run-in box, the run-in box becomes the first inline

box of the block box.

If a inline box follows, the run-in box becomes a block box.

extra credit

As I mentioned, every element has a default display type. However, you can alwaysoverride this! Though it

wouldn't make sense to make an inline div, you can use this to customize the display of elements that have

particular semantics. A common example is making inline li elements for horizontal menus.

margin: auto; #main {

width: 600px;

margin: 0 auto;

}

Setting the width of a block-level element will prevent it from stretching out to the edges of its

container to the left and right. Then, you can set the left and right margins to auto to horizontally

center that element within its container. The element will take up the width you specify, then the

remaining space will be split evenly between the two margins.

The only problem occurs when the browser window is narrower than the width of your element. The

browser resolves this by creating a horizontal scrollbar on the page. Let's improve the situation...

max-width #main {

max-width: 600px;

margin: 0 auto;

}

Using max-width instead of width in this situation will improve the browser's handling of small windows. This

is important when making a site usable on mobile.

the box model While we're talking about width, we should talk about width's big caveat: the box model. When you set the

width of an element, the element can actually appear bigger than what you set: the element's border and

padding will stretch out the element beyond the specified width.

.simple {

width: 500px;

margin: 20px auto;

}

.fancy {

width: 500px;

margin: 20px auto;

padding: 50px;

border-width: 10px;

}

For generations, the solution to this problem has been math. CSS authors have always just written a smaller

width value than what they wanted, subtracting out the padding and border. Thankfully, you don't have to do

that anymore...

box-sizing Over the generations, people realized that math is not fun, so a new CSS property called box-sizing was

created. When you set box-sizing: border-box; on an element, the padding and border of that element no

longer increase its width. Here is the same example as the previous page, but with box-sizing: border-

box; on both elements:

.simple {

width: 500px;

margin: 20px auto;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.fancy {

width: 500px;

margin: 20px auto;

padding: 50px;

border: solid blue 10px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

Since this is so much better, some authors want all elements on all their pages to always work this way. Such

authors put the following CSS on their pages:

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

This ensures that all elements are always sized in this more intuitive way.

Since box-sizing is pretty new, you should use the -webkit- and -moz- prefixes for now, as I have in

these examples. This technique enables experimental features in specific browsers. Also, keep in

mind that this one is IE8+.

position In order to make more complex layouts, we need to discuss the position property. It has a bunch of possible

values, and their names make no sense and are impossible to remember. Let's go through them one by one.

static

static is the default value. An element with position: static; is not positioned in any special way. A static

element is said to be not positioned and an element with its position set to anything else is said to

be positioned.

relative

.relative1 {

position: relative;

}

.relative2 {

position: relative;

top: -20px;

left: 20px;

background-color: white;

width: 500px;

}

relative behaves the same as static unless you add some extra properties.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be

adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

fixed

A fixed element is positioned relative to the viewport, which means it always stays in the same place even if

the page is scrolled. As with relative, the top, right, bottom, andleft properties are used.

.fixed {

position: fixed;

bottom: 0;

right: 0;

width: 200px;

background-color: white;

}

A fixed element does not leave a gap in the page where it would normally have been located.

Mobile browsers have surprisingly shaky support for fixed.

Solutions: to some extent the problem is solved with javascript. Sencha Touch and Jquery Mobile are

very almost the solutions to this problem on mobile devices.

absolute

absolute is the trickiest position value. absolute behaves like fixed except relative tothe nearest

positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no

positioned ancestors, it uses the document body, and still moves along with page scrolling.

Remember, a "positioned" element is one whose position is anything except static.

Here is a simple example:

.relative {

position: relative;

width: 600px;

height: 400px;

}

.absolute {

position: absolute;

top: 120px;

right: 0;

width: 300px;

height: 200px;

}

position example This position stuff might make a little more sense in a practical example. Below is a realistic page layout.

.container {

position: relative;

}

nav {

position: absolute;

left: 0px;

width: 200px;

}

section {

/* position is static by default */

margin-left: 200px;

}

footer {

position: fixed;

bottom: 0;

left: 0;

height: 70px;

background-color: white;

width: 100%;

}

body {

margin-bottom: 120px;

}

float Another CSS property used for layout is float. Float is intended for wrapping text around images, like this:

img {

float: right;

margin: 0 0 1em 1em;

}

clear The clear property is important for controlling the behavior of floats. Compare these two examples:

<div class="box">...</div>

<section>...</section>

.box {

float: left;

width: 200px;

height: 100px;

margin: 1em;

}

In this case, the section element is actually after the div. However, since the div is floated to the left, this is

what happens: the text in the section is floated around the div and the section surrounds the whole thing.

What if we wanted the section to actually appear after the floated element?

.box {

float: left;

width: 200px;

height: 100px;

margin: 1em;

}

.after-box {

clear: left;

}

Using clear we have now moved this section down below the floated div. You use the value left to clear

elements floated to the left. You can also clear right and both.

the clearfix hack Here is a weird, bad thing that can sometimes happen when using floats:

img {

float: right;

}

Uh oh... this image is taller than the element containing it, and it's floated, so it's overflowing outside of its

container!

Boo. There is a way to fix this, but it's ugly. It's called the clearfix hack.

Let's try adding this new CSS to the div containing the image:

.clearfix {

overflow: auto;

}

This works for modern browsers. If you want to support IE6 you will want to add the following:

.clearfix {

overflow: auto;

zoom: 1;

}

There are exotic browsers that may require extra attention. The world of clearfixing is pretty scary, but this

simple solution will work for the vast majority of browsers today.

http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best

float layout example It's very common to do entire layouts using float. Here is the same layout we did withposition earlier, but

using float instead.

nav {

float: left;

width: 200px;

}

section {

margin-left: 200px;

}

percent width Percent is a measurement unit relative to the containing block. It's great for images: here we make an image

that is always 50% the width of its container.

article img {

float: right;

width: 50%;

}

You could even use min-width and max-width to limit how big or small the image can get!

percent width layout

You can use percent for layout, but this can require more work. In this example, the navcontent starts to wrap

in a displeasing way when the window is too narrow. It comes down to what works for your content.

nav {

float: left;

width: 25%;

}

section {

margin-left: 25%;

}

media queries

"Responsive Design" is the strategy of making a site that "responds" to the browser and device that it

is being shown on... by looking awesome no matter what.

Media queries are the most powerful tool for doing this. Let's take our layout that uses percent widths

and have it display in one column when the browser is too small to fit the menu in the sidebar:

@media screen and (min-width:600px) {

nav {

float: left;

width: 25%;

}

section {

margin-left: 25%;

}

}

@media screen and (max-width:599px) {

nav li {

display: inline;

}

}

Tada! Now our layout looks great even on mobile browsers. Here are some popular sites that use media

queries this way. There is a whole lot more you can detect thanmin-width and max-width: check out the MDN

documentation to learn more.

extra credit

You can make your layout look even better on mobile using meta viewport.

http://mediaqueri.es/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

http://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/

inline-block You can create a grid of boxes that fills the browser width and wraps nicely. This has been possible for a long

time using float, but now with inline-block it's even easier.inline-block elements are

like inline elements but they can have a width and height. Let's look at examples of both approaches.

The Hard Way (using float)

.box {

float: left;

width: 200px;

height: 100px;

margin: 1em;

}

.after-box {

clear: left;

}

The Easy Way (using inline-block)

You can achieve the same effect using the inline-block value of the display property.

And you don’t have to use clear in this case.

.box2 {

display: inline-block;

width: 200px;

height: 100px;

margin: 1em;

}

You have to do extra work for IE6 and IE7 support of inline-block. Sometimes people talk about inline-

block triggering something called hasLayout, though you only need to know about that to support old

browsers. Follow the link about IE6 and IE7 support if you're curious to learn more. Otherwise, let's continue.

http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

inline-block layout

You can also use inline-block for layouts. There are a few things to keep in mind:

inline-block elements are affected by the vertical-align property, which you probably want

set to top.

You need to set the width of each column

There will be a gap between the columns if there is any whitespace between them in the HTML

nav {

display: inline-block;

vertical-align: top;

width: 25%;

}

.column {

display: inline-block;

vertical-align: top;

width: 75%;

}

column There is a new set of CSS properties that let you easily make multi-column text. Have a look:

.three-column {

padding: 1em;

-moz-column-count: 3;

-moz-column-gap: 1em;

-webkit-column-count: 3;

-webkit-column-gap: 1em;

column-count: 3;

column-gap: 1em;

}

CSS columns are very new, so you need to use the prefixes, and it won't work through IE9 or in Opera Mini.

There are some more column-related properties, so click here to read more. Otherwise, off to the next topic.

http://quirksmode.org/css/columns/

http://caniuse.com/#search=column

flexbox

The new flexbox layout mode is poised to redefine how we do layouts in CSS. Unfortunately the

specification has changed a lot recently, so it's implemented differently in different browsers. Still, I'd

like to share a couple examples so you know what's coming up. These examples currently only

work some browsers that use thelatest version of the standard.

There are a lot of out-of-date flexbox resources around. If you want to learn more about flexbox, start

here to learn how to identify if a resource is current or not. I have written adetailed article using the

latest syntax.

There is a lot more you can do with flexbox; these are just a few examples to give you an idea:

Simple Layout using Flexbox

.container {

display: -webkit-flex;

display: flex;

}

nav {

width: 200px;

}

.flex-column {

-webkit-flex: 1;

flex: 1;

}

Fancy Layout using Flexbox

.container {

display: -webkit-flex;

display: flex;

}

.initial {

-webkit-flex: initial;

flex: initial;

width: 200px;

min-width: 100px;

}

.none {

-webkit-flex: none;

flex: none;

width: 200px;

}

.flex1 {

-webkit-flex: 1;

flex: 1;

}

.flex2 {

-webkit-flex: 2;

flex: 2;

}

Centering using Flexbox

.vertical-container {

display: -webkit-flex;

display: flex;

height: 300px;

}

.vertically-centered {

margin: auto;

}

Finally, it's easy to vertically center something in CSS!

css frameworks

Because CSS layout is so tricky, there are CSS frameworks out there to help make it easier. Here are a few if

you want to check them out. Using a framework is only good idea if the framework really does what you need

your site to do. They're no replacement for knowing how CSS works.