- Contents
- Box Model
- Layout Modes
- Block Display
- Inline Display
- Tables
- The Visual Formatting Model
- Relative Positioning
- Floats
- Absolute Positioning
- Fixed Positioning
- Z-Index Property
- Display Property
- Overflow Property
- Multi-Colunm Property
- FlexBox Property
CSS 2.1 has four layout modes that can be strategically used, in addition to the ubiquitous floats. I will introduce all of them here, and add two more just introduced by CSS3 that are usable right now.
There are several other layout strategies being baked in the W3.org oven, like Positioned Floats, Exclusions, Grid Alignment/Grid Layout, Template Layout Module and Regions, which has recently been proposed by Adobe. I’m sure these new CSS modules will significantly change the Layout and Design landscape for the better, but you will have to wait before whatever final standards are cooked enough to be supported by all browsers.
Many layouts require multiple strategies at once. This means you have to understand all of these strategies. By the time you are ready to start the final, that will hopefully be the case.
Overview
The box model is central to understanding the layout modes, so we start with that.
We then take a look at the four layout modes that determine the size and position of boxes, and their relationships with their sibling and ancestor boxes. There is:
1) block layout, designed for laying out documents and is used to lay things out vertically,
2) inline layout, designed for laying out text, and is used to lay things out horizontally
3) table layout, designed for laying out information in a tabular format, and
4) positioned layout, designed for very explicit positioning without much regard for other elements in the document. Add to that the ability to
5) float an element to the right or left side of the parent box, and you are pretty well equipped to create every web layout you currently see out there.
For additional layout options, there are multiple columns and the Flexible Box Layout Module introduced with CSS3.
The Box Model
The box model is central to understanding how to do layout with CSS. Every element is a content box with specific properties; padding, border and margin, in addition to all the other layout properties, like position, width, height, display, and so on.
The default setting for the box properties is zero, with the width set at 100% of the parent box. By default, all children boxes are the same width as their parent. Any box that has the body element as parent is the width of the window.
Generally speaking, When you specify the width and hight of the box, that only specifies the width and height of the content. Padding, the border and margins are in addition to specified height and width, so the actual size of the box in the layout is the content plus twice the margin, border and padding. A box that is 400px wide, with 20 px padding, 2 px border and 10px margins would take up 444 pixels.
Negative margins can be used to subtract from the space that the content takes up in the document flow. If the content is height: 300px, and has a margin-bottom: -150px, the next element down will start midway the box, because the negative margin does not effect the size of the content. Change the second box’s top and bottom margins to -75px; You will see the second box move up 75 points over the first box and the containing box’s size is reduced by 150px.
Box Model Interactive
CSS Code View
BOX 1: The margin is set for 20px auto, meaning that the box has 20 pixels of margin on top and bottom, and the left and right margins are automatically adjusted to center the box, possible only because the box has a declared width
BOX 2: Notice that even though both boxes have a 20px margin, that margin collapses between the boxes. If you play around with the numbers, you will see that it collapses the smaller margin into the larger margin.
The Layout Modes
The layout modes determine the layout of boxes in the document flow. Boxes act either as block layout, like inline layout, like table layout or like positioned layout in which absolute and fixed positioning , which disregards the document flow.
The analogy that should resinate with most of you is to compare the document flow to the flow of a word processor, which starts at the top of the document and proceeds downward. Paragraphs are like block elements, meaning that if you give a style to a paragraph, it applies to the entire paragraph, even if you only selected part of it. When you apply a style to characters, on the other hand, only those characters selected receive the style.
Contrast this document flow with InDesign‘s ability to draw the box anywhere on the page. Each box, of course, initiates its own internal inline flow, but the box itself is not connected to the document flow at all. That is how absolute and fixed positioning work.
This can warm design students to using the absolute positioning as the layout mode of choice, but be forewarned. Web pages are not like printed pages, and as we shall see, it’s generally not a good idea to use absolute positioning as your main layout strategy.
That is because the elements are taken out of the document flow and no longer relate to one another. It may work for elements that do not change, but if you are working with text, instead of pushing the remaining content down, it runs into it.
Tables, the forth layout mode, are in their own world, and wile they are great for tabular data, should not be used for layout purposes, as that violates the separation of church and state, eh, no, I mean, form and content.
Block Display
The block layout mode displays the boxes just described by the box model, in default configuration, as vertically , coming one after another down the page in the direction of the document flow. Each box, by default, is 100% the width of its parent. Even if the box is not 100% the width of its parent, block elements still start on a new line, by default, starting with the top left and corner of the <body> tag. Some HTML elements follow the block model by default, like headers <h1>, paragraphs <p> and list items<li>, and the generic block element, the <div>, though as we will see, their display quality can be changed to inline or table modes using the display property.
Inline Display
Inline tags enclose inline content elements. There are actually two kinds of inline content, replaced and non replaced elements. A character is an example of a non-replaced inline element, and a picture is an example of a replaced inline element. The box properties like margins, padding and border properties are applied differently to these elements.
Both of these kinds of inline elements flow one after one, till they reach the width of the containing box. The line then returns to the next line, just like this text. This inline flow, unlike the document flow, is language specific, and in the English language, the inline flow goes from left to right, repeating from top to bottom. In the Japanese language, the inline flow goes from top to bottom, repeating this from right to left.
Other elements whose default display is inline are the <img> tag, the Hyperlink <a> tag and the emphasis<strong>. The generic inline element is <span>, and you can use it to select any number of characters within the same parent container. The default inline display can be changed to block or table using the display property.
Tables
Tables themselves by default act like block elements, but the layout mode of the table is different from the document flow. They used to be used for layout in the early days by programs like Dreamweaver created, but they are not to be used for layout purposes anymore. Did I already say that?
The following example provides both the HTML used to build the table and the CSS used to style it. I have included the HTML code so that you can see their structure. The basic structure is a <table> element followed by a table row <tr>element in which table data <td> elements make up the columns. It is possible to nest tables, shown here by nesting the same table in two of the table data cells.
If you want to style the table, its best to create as many hooks in it as possible, and this table is loaded up with column descriptions, a table header, a table footer and multiple table bodies, all used in styling the table. The code and an explanation of how the table layout works is reproduced below:
CSS Code View
| Head 1 | Head 2 | Head 3 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| table data | table data | table data | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| table data | table data | table data | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| table data | table data | table data | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| table data | table data | table data | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| table data | table data | table data | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
table data |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| table data | table data | table data | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| table data | table data | table data | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| The Footer is a Place for Information About the Table. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<table id="table"> <caption>The Caption Holds the Title of the Table </caption> <col><col><col> <thead> <tr><th>Head 1</th><th>Head 2</th><th>Head 3</th></tr> </thead> <tbody> <tr> <td> table data </td> <td> table data </td> <td> table data </td></tr> <tr> <td> table data </td> <td> table data </td> <td> table data </td></tr> <tr> <td> table data </td> <td> table data </td> <td> table data </td></tr> <tr> <td> table data </td> <td> table data </td> <td> table data </td></tr> </tbody> <tbody> <tr> <td> table data </td> <td> table data </td> <td> table data </td></tr> <tr> <td> TABLE </td> <td> table data </td> <td> TABLE </td></tr> <tr> <td> table data </td> <td> table data </td> <td> table data </td></tr> <tr> <td> table data </td> <td> table data </td> <td> table data </td></tr> </tbody> <tfoot> <tr><td colspan="3"> The Footer is a Place for Information About the Table. </td></tr> </tfoot> </table>
For demonstration purposes, I included the table within itself, which is just a repeat of the code placed in a table data. The ability to put tables inside of tables for layout purposes was much abused in the early days of the web.
The HTML code for the table can be divided into parts, and each can be styled separately. There are table headings, footers, data cells and captions and rows, all of which can be styled. The even and odd table rows are styled using pseudo selectors. If you look at the code, you can see that the table caption comes first, then the table header, two table bodies that contain the table rows and the table data cells and finally a table footer. The row tags allow the three rows to be styled individually, though that too could be handled by pseudo selectors.
Positioning the Document Flow
All of the objects can be positioned in (or out of) the document flow, which stacks the content together like building blocks, only in reverse of gravity; starting at the top, the elements build their way down. W3.org talks of the way the elements flow on the page as the visual formatting model. These are the primary tools that you will have to comprehend to create your layout.
Normal Flow
In the normal flow, boxes are like blocks that follow the document flow as they stack. Each of these boxes can hold other boxes, inline content, or both.
Boxes are described as stacked paragraphs blocks, whereas inline elements are said to be “distributed in lines”.
Boxes can become inline elements when they are floated, and then act just like a character does in a line of text. Pictures act like inline content items as well, but the boxes found in tables are another animal altogether, and follow the table construction rules.
The default normal flow of the boxes is like a word-processor, in which each box takes up space in the document flow. If top and bottom margins meet, they collapsed to the larger of the two margins as demonstrated above. Left and right margins never collapse, and auto margins suspend a child element horizontally centered in the containing element, also demonstrated above.
Relative Positioning
Relative positioning keeps the normal flow. The horizontal and vertical distance is shifted in relation to the position that the box has in the normal flow, and the space it occupied does not collapse. You can specify positive and negative distance from the top, left, bottom or right edges of the parent box. Boxes can and will overlap, and you use z-index to adjust which box is on top if you have specified a position. If the relative position distance is 0, there is no change from the static position. Notice that I have given the parent element a position of relative flow without deviation. Had I not done that, if I were to change the relative flow to absolute, the paragraphs would have ended up at the top of the page, rather than the top of the containing <div id="norm">
CSS Code View
Normal Flow
The body also takes block elements. Block elements are those that create a box that can contain inline content.
Block elements expand to the width of the parent, and follow one another like paragraphs down the page.
The boxes determine the relation to adjacent boxes through margins, and determine the relation to the child elements and inline content through padding.
In between the margins and the padding is the border, which can be set to show or hide for each side.
Static Position
Static position is the same as the normal flow, which is similar to relative positioning if nothing is shifted. You can see that in these paragraphs: some have no position and take the normal flow by default, some have relative position, and some have the position of static.
Relative Flow
Relative flow is a subcategory of normal flow, for the element’s position still takes up place in the normal flow, but it has been shifted in the top, right, bottom or left directions. You can shift the box to be well out of its parent, they way that this one has been shifted our of it’s containing div.
Floated boxes
Floated boxes are part of the normal flow. When boxes are floated, they behave as inline elements. That means that they go from being in the document flow to being in the inline content flow of a parent box.
A box is either floated to the right or floated to the left, and it shifts the box to the right or left edge of the parent containing box at the line that the box is on. The remaining content then continues to flow around that box until it runs past the floated element or is cleared.
Floated boxes are central to multi-column page layouts, though that was not immediately apparent as they were first used to flow text around pictures. Nesting floats in one another is the basis for multi-column layouts. Nest one box inside of a floated box, and you have two columns, nest that box again inside another floated box, and you have three, and so on.
Floating Boxes Interactive
CSS Code View
Live Demo
Box A:
Box B:
Box C:
Box D:
Two of the floating properties have been disabled. Enable them and see how the boxes jump into position. Once you do, you will notice that Box D also has the clear right property, which pushes it below Box C. Delete the clear property and see what happens.
Floating Three Column Layout Interactive
These boxes become a three column grid when you remove the three commented out lines ( /* */ ) that keep the floats from working. Remove them and see the three columns jump into place. Next remove the commented out ( /* */ ) from the background of #cd #wrap and remove the backgrounds from #cd aside and you will have a bulletproof three column layout. Work-arounds like this will no longer be necessary with the FlexBox Property.
CSS Code View
Live Demo
HEADER
CONTENT
You will see that the columns fit the content, and that they do not all go to the bottom. This is a problem if you want to have columns with different backgrounds. The solution is to use an image that repeats vertically all the way to the bottom, which I have all ready for you to uncomment. You then have to comment-out the background colors of the columns themselves before you can see it.
HTML markup for the example
<div id="cd-wrap"> <header> HEADER </header> <div id="cd-container"> <aside> SIDE A </aside> <article> CONTENT </article> <aside id="side-b"> SIDE B </aside> </div> <footer> FOOTER </footer> </div> </div>
Absolute Positioning
Absolute positioning is the forth layout mode, and it takes the box out of the normal document flow, except for a placeholder, the point of origin on which the absolute positioned box is aligned, and positions it in a layer above it in relation to the containing box’s coordinates, as long as that parent has been given a position in the document flow. If not, it continues on down the ancestry till it find an element that has been given a position, or the body tag, which often happens, and which places the absolute value relative to the upper left hand corner of the window or viewport. To avoid this problem, remember to give the parent of the box you want to move absolutely a position: relative; without actually moving it from its place in the document flow.
There is an attraction for students to use absolute positioning as the main layout system since it follows the paradigm set up in print with programs like indesign. The problem is that the web is not like print, and such layouts quickly get into trouble. While it is fine to use absolute positioning for the very simplest of layouts, it breaks down for anything remotely more complicated, where it is a better idea to layout the document manipulating the document flow through margins, padding, floats and relative positioning.
These warnings aside, absolute positioning can be very useful in placing elements exactly where you need them, and can allow for some nifty layout calisthenics, as the demo shows, where objects are distributed by manipulating percentages in relation to the parent. If you change the position to fixed, the squares float in relation to the viewport. If you change the position to relative, and negate the object’s place in the normal document flow by adding negative margins, the objects will behave somewhat similar to the absolute positioned objects.
It is possible to manipulate elements like this because they can have more than one class as long as they are separated by a space: <div class="one box a">. Each box has three classes determining them: <div class="one box a"><p>1
</div>
Absolute Positioning Interactive
CSS Code View
Live Demo
1
2
3
4
5
6
7
8
9
Fixed Positioning
Fixed position is a subcategory of absolute positioning. The difference being that the container box is the viewport. The viewport is the window, so it is absolutely fixed to the window, regardless of the scrolling contents in the window. This can be used for menus like the one to the right, that stays in place while the user scrolls up and down the page. You can see this if you change the position of the boxes above to fixed, and they will float in the relation to the viewport.
Z-Index Property
Once an element has been positioned, it’s overlap on the z-axis can be manipulated by the index property. This can be thought of as having multiple layers, much like an Illustrator File. The normal flow happens at level 0, and you can put elements above and below the normal flow by giving them a number for −100 to 100.
Set the z-index of the following boxes to negative to read when using z-index can be useful. Play with the stacking order, and remember, the element you want to position in another layer other than the document flow has to be positioned first. Try giving the all the boxes a z-index of -3 and watch them move behind the text. Reverse the order of the boxes by changing the first box to -1, second to -2, third to -3 and the last box to -4.
Z-Index Property Interactive
CSS Code View
Live Demo
Box A:
Box B:
Box C:
Box D:
Making the z-index negative and watch the boxes go below the parent. Z-index can be especially useful if one element accidentally cover up a menu item, which is then no longer responds. By changing the z-index, you can move the menu above whatever is obstructing it.
Display Property
The ability to change the display of an element is a very powerful feature of CSS, and its ability to function as a layout strategy has been overlooked, as the Beyond Floats Article shows.
It is possible to change a block element to an inline element, to a list item to a table, table cell, etc. This is very useful for changing the basic behavior of an element exploited in the Beyond Floats Article.
Be aware that an inline object is content and does not have volume beyond that, so you need to use the inline-block value to change a block behavior into inline behavior.
Another important display values is display: none. That allows the element to be hidden from view till it is called up by a pseudo class like hover. This is one way to make CSS drop menus with multiple levels that pop out, for example. We will not get into that, as no one here will build a website so complicated as to need such a menu, though I do demonstrate how to built one. There is another property, visibility, that turns the visibility of objects on or off, but that differs from display: none; in that the element still takes up room in the document flow.
Display Property Interactive
CSS Code View
Live Demo
Box A:
Box B:
Box C:
Box D:
Overflow Property
Unless otherwise specified, each box will span the entire width of the parent and accommodate whatever content. If you specify a width, text will just wrap within that width, but if a replaced element, like a picture or a video file, is larger than the specified width, it could overflow the box boundaries, it could be clipped at the box boundaries or it could be accommodated by specifying horizontal overflow, in which case a scrollbar would provide access to the otherwise clipped content.
If you specify a height, its possible that both pictures and text could force the content out of the box. You can control this though the overflow property, which allows you to control whether or not content remains visible, hidden or if scroll bars appear to facilitate the extra content. You can also specify which axis overflows. Take away the comments from overflow-x: hidden; and you will see the horizontal scroll bar disappear.
If a web site has both short and long documents, in which case the vertical scroll bar can appear and disappear from page to page, with the result that the web site re-centers and the jump is both undesirable and quite noticeable. Telling the HTML element to not scroll in the y axis solves that problem.
Overflow Property Interactive
CSS Code View
CSS3 Multi-Column Property
It is easy to create multi-column layouts using the new CSS3 multiple columns property. The document flow can create more columns inside a box than is visually pleasing, so change it to one, two, three or four columns, depending on the size of the screen. A good use of this would be in media queries, where small screens get one column, tablets get two and computer monitors get three or more columns.
Multi-Columns Interactive
CSS Code View
Live Demo
What is “Fun?”
“I’ll know it when I see it.”
As designers, we get a lot of similarly elusive adjectives from clients, as they tell us what they want their sites to be: “The site needs to be ‘cool,’” “It should be ‘exciting,’” “I want it to ‘pop.’” When we ask them to clarify, the answer we get back sounds a lot like “I can’t tell you what it is, but I’ll know it when I see it.”
“Fun” is a particularly difficult concept to define. And we’re starting to hear it a lot more from clients as we design for different contexts of use.
So what’s a designer to do?
CSS3 FlexBox Property
The Flexible Box Layout Module is designed solve a layout problem where the extra space is automatically divided between flexed siblings. It can align its contents horizontally or vertically, can have the order of the columns swapped dynamically, and can automatically “flex” the size of each columns to fit the available space.
Using Flexbox: Mixing Old and New for the Best Browser Support