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