Learn CSS Layout Having no layout whatsover is almost ok if all you want is one big column of content. However, if a user makes the browser window really wide, it gets kind of annoying to read: after each line your eyes have a long distance to travel right-to-left to the next line. Try resizing your browser to see what I mean! Before we fix this problem, let's make sure we're clear on the very important 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

inlinespan is the standard inline element. An inline element can wrap some text inside a paragraph like this without disrupting the flow of that paragraph. The a element is the most common inline element, since you use them for links.

noneAnother common display value is none. Some specialized elements such as script use 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 valuesThere are plenty of more exotic display values, such as list-item and table. Here is an exhaustive list. We'll discuss inline-block and flex later on. extra creditAs I mentioned, every element has a default display type. However, you can always override 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.

the box modelWhile 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. Look at the following example, where two elements with the same width value end up different sizes in the result.

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-sizingOver 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:

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:

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

positionIn 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, but maybe you should bookmark this page too. static

absolute absolute is the trickiest position value. absolute behaves like fixed except relative to the 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;}

This stuff is tricky, but it's essential to creating great CSS layouts. On the next page we'll use position in a more practical example.position exampleThis position stuff might make a little more sense in a practical example. Below is a realistic page layout.

This example works because the container is taller than the nav. If it wasn't, the nav would overflow outside of its container. In the coming pages we'll discuss other layout techniques that have different pros and cons.floatAnother CSS property used for layout is float. Float is intended for wrapping text around images, like this:

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

the clearfix hack

percent widthPercent 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. Try shrinking down the page to see what happens!

percent width layoutYou can use percent for layout, but this can require more work. In this example, the nav content starts to wrap in a displeasing way when the window is too narrow. It comes down to what works for your content.

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:

extra creditYou can make your layout look even better on mobile using meta viewport. inline-blockYou 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)

The Easy Way (using inline-block)You can achieve the same effect using the inline-block value of the display property.

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 previous link about IE6 and IE7 support if you're curious to learn more. Otherwise, let's continue.

inline-block layoutYou 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

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

read more. Otherwise, off to the next topic.flexboxThe 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 the latest 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 a detailed 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