The biggest piece of advise I can give a person is:

1. Find out what a tag does!
2. How is it similar to other tags?
3. How is it different?

What is the difference between a newbie and a Master web developer? Newbies normally can tell you what something does but they don’t know why it does what it does. How things work (ie inner working knowledge) will really help you excel.

1.) If I were to ask you “What is the default position of block level element” would you be able to tell me? I bet most people can’t respond to that without looking that up. The answer to the question was “STATIC”.

2.) Two of the most confusing styling style properties are:

1. Whether an “element is block or inline” by default
2. What the default positioning of an element is. (We just found out this is STATIC)

Not knowing these things will limit your designs and force you to use hacks.

If you don’t know what either of those two items are. Don’t worry.

Definition of Block level elements

To sum it up best. Block level elements are containers.

They can contain other block level elements as well as inline elements. They start new lines of text when you use them. A block-level element is an element that creates large blocks of content like paragraphs or page divisions.

Block level elements can have width, height, Max-width,max-height, min-width and min-height applied to them.

What are the elements that are considered block level elements?

Definition of an inline element

To sum it up best inline elements become part of the HTML flow of the containing Block/inline level element. Inline elements can only contain other inline elements

What are the elements that are considered inline elements?

Want to get really confused?

Here’s the real kicker. Remember when I went on that little bit of the rant at the top of the page about some things that seem to be magical? Well there was a reason for it. LOL. Even though the lists I linked to  say an element is inline there is NOTHING stopping you from making it a block level element. While I don’t recommend changing elements to what ever you feel like, I do think there are a couple instances that you might need to change between a block and inline Element.

Horizontal List Menus – By default most lists are displayed vertically. If you want to have the horizontal you have no other option but to change them from block to inline.

Headers inside text. Say you want a header to remain in the text flow so that the rest of the text just seems to flow as if it was no break you’d need to make it inline.

There is actually one more option to take about when talking about inline or block level elements. The third thing an element can be is “hidden”. If something is classified as hidden then it will not be displayed on the page.

Positioning

I think one of the best articles of all time on positioning can be found at CSS-TRICKS. I’m not even going to bother re-hashing a perfect post.

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Hope you learned a thing or two.

<img src="\images\line-break.jpg" class="lineBreak" />

While you might think that looks ok, it turns out there are issues with that code. The two issues are only an issue in Firefox. The issue why that image will not display in Firefox is that FireFox does not like “\” for defining folder structure.

If you use this code everything will look fine across all browsers.

<img src="/images/line-break.jpg" class="lineBreak" />

I don’t know why I accidentally typed in “\” instead of a “/” but it’s nice to know what each browser is capable of.

What are some of the new elements you say? Well without further adieu here are the main additions to web layout:

• header
• section
• footer
• aside
• nav
• article
• figure

You might be asking what is the big deal with these being added to HTML5? Well up until now most people would do something similar to this to create a header section:

<div id="header">

   some code goes here

</div>

Things like search engines don’t really understand that the last piece of code is the header. To top it off when pages start getting a ton of <div>’s, it makes it much harder to read the code then what HTML5 brings to the table.

Here is the same HTML container but now we are using the “header” section that is part of HTML5:

<header>

    some code goes here...

</header>

HTML5 also helps to make the CSS easier read and follow. Here is the example of css for both the <div> approach and the new HTML5 approach.

Old <div> approach:

#header    { width:1000px; height: 300px; }

#header h1 { font: bold 20px Helvetica, Sans-serif; margin: 0 0 10px 0; }


#nav    { width:1000px }

#footer { width:1000px }

New HTML5 approach:

header { width:1000px; height: 300px; }

header h1 { font: bold 20px Helvetica, Sans-serif; margin: 0 0 10px 0; }


nav    { width:1000px }

footer { width:1000px }

As you can see the new elements will provide a type of meta data to the browser and search engines letting it know where the main content is on the page. This should help with SEO (search engine optimization).

For most browsers you will need to add the elements to the HTML document by doing three things:

Set the new Doc Type:

<!DOCTYPE html>

Second we have to tell the browser to treat the new items as Block Type elements using CSS. Once we create the CSS file all we have to do then is to link the CSS to the page we want to code in HTML5. Copy this css and save it as HTML5.css:

header, section, footer, aside, nav, article, figure {

	display:block;

}

The third thing you will have to do is to add some JavaScript to the beginning of your webpage to add these items to the DOM list in your browser. (Incase it isn’t supported yet)

<!--[if IE]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]—>   

As you can see in the example above we finally a doc type that a mortal can actually remember! Ok. Time to wrap this one up. Here’s a small FULL example of HTML5 and the CSS that goes with it:

HTML5 (index.html)

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="utf-8" />


    <title>HTML5 Demo</title>


    <link href="stylesheet/reset.css" rel="stylesheet" type="text/css">

    <link href="stylesheet/html5.css" rel="stylesheet" type="text/css">

    <link href="stylesheet/master.css" rel="stylesheet" type="text/css">



    <!--[if IE]>

    	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->

</head>



<body><div id="page" class="container floatmiddle">


    <header>

    	<h1>The title of the webpage</h1>

    </header>


    <nav class="container">

    	<p class="floatleft">Left</p>

        <p class="floatright">Right</p>

    </nav>


    <section>

    	<p>This is a test</p>

    </section>


    <footer>

    	<p>This is the footer</p>

    </footer>


</div></body>

</html>

reset.css  <– Click here for the code

HTML5 – See above for the code.

master.css

body    { background:f4f4f4; font: 15px/1.5 Georgia,serif;}

a       { text-decoration: none; }


header h1 { font: bold 30px Helvetica, Sans-serif; margin: 0 0 5px 0; }

header h2 { font: bold 20px Helvetica, Sans-serif; margin: 0 0 10px 0; }


#page { width: 500px; background:#CCC }

This will produce something that will look similar to this:

I hope you found this informative

1. Block
2. Inline
3. Not Displayed

Block Elements

A block-display element will span the full width of the space available to it, and so will start on a new line in the flow of HTML. The flow will continue on a new line after the block-display element.

To define an element as a block you can do it in CSS by typing:

display:block;

Common HTML elements that are naturally block-display include:

• <div>
• <h1> … <h6>
• <p>
• <ul>, <ol>, <dl>
• <li>, <dt>, <dd>
• <table>
• <blockquote>
• <pre>
• <form>

Inline Elements

Inline-display elements don’t break the flow. They just fit in with the flow of the document.

To define an element as an inline you can do it in CSS by typing:

display:inline;

More elements are naturally inline-style, including:

• <span>
• <a>
• <strong>
• <b>
• <em>
• <i>
• <img />
• <br>
• <input>
• <abbr>
• <acronym>

Can you imagine a “<a>” tag being a BLOCK element? I can’t. That would suck if all links had to be on a new line all by themselves!

Not Displayed

Some tags, like <meta /> and <style> are not visible

The HTML file <test.html> would look like this:

<html>
<head>
<link href="test-css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
        <div class="main_wrapper">
            <div class="header">
                <p>Header</p>
            </div>
            <div class="left_column">
                <p>This is the left Column</p>
            </div>
            <div class="right_column">
                <p>This is the Right Column</p>
            </div>
            <div class="footer">
                <p>Footer</p>
            </div>
        </div>
    </td>
  </tr>
</table>
</body>
</html>

The CSS file <teset-css.css> would look like this:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,
pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,
samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,
legend,table,caption,tbody,tfoot,thead,tr,th,td
{border:0;outline:0;vertical-align:baseline;background:transparent;margin:0;padding:0;}

.main_wrapper {
    width: 1000px;
}
.header {
    width: 1000px;
    float: left;
}
.left_column {
    background-color: #999;
    width: 700px;
    float: left;
}
.right_column {
    background-color: #0F6;
    width: 300px;
    float: left;
}
.footer{
    width: 1000px;
    float: left;
}

Perhaps you’re feeling slightly uncomfortable about the example we’ve just seen—after all, haven’t web standards advocates like myself been insisting for years that you shouldn’t be using tables for layout?

Applying table-related display property values to web page elements causes the elements to mimic the display characteristics of their HTML table equivalents. In this article, I’ll demonstrate how this will have a huge impact on the way we use CSS for web page layouts.

Using CSS Tables

CSS tables solve all the problems encountered when using absolute positioning or floats to create multi-column layouts in modern browsers. Specifying the value table for the display property of an element allows you to display the element and its descendants as though they’re table elements. The main benefit of CSS table-based layouts is the ability to easily define the boundaries of a cell so that we can add backgrounds and so on to it—without the semantic problems of marking up non-tabular content as a HTML table in the document.

Before we dive in and discover how this works, let’s create an instant demonstration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  <head>
    ⋮ HTML head content…
  </head>
  <body>
    <div id="wrapper">
      <div id="header"></div>
      <div id="main">
        <div id="nav">
          ⋮ navigation column content…
        </div>
        <div id="extras">
          ⋮ news headlines column content…
        </div>
        <div id="content">
          ⋮ main article content…
        </div>
      </div>
    </div>
  </body>
</html>

The HTML source matches the desired content display order. The nav column comes first, followed by the extras column, and then the content column.

We also need to apply the following CSS:

#main {
  display: table;
  border-collapse: collapse;
}

#nav {
  display: table-cell;
  width: 180px;
  background-color: #e7dbcd;
}

#extras {
  display: table-cell;
  width: 180px;
  padding-left: 10px;
  border-right: 1px dotted #d7ad7b;
}

#content {
  display: table-cell;
  width: 380px;
  padding-left: 10px;
} 

The fresh CSS table-based layout that we’ve just created will display correctly in Internet Explorer 8 as well as in Firefox, Safari, and Opera; the image below shows how it looks in IE8.

Our three-column equal-height layout is achieved without having to resort to tricks like faux columns using background images, worrying about positioning, or having to clear floats—revolutionary!

How Does This Work?

The display property allows you to specify a range of table-related values in order to make elements display as though they were table elements. The available display values are:

• table makes the element behave like a table element
• table-row makes the element behave like a table row (tr) element
• table-cell makes the element behave like a table cell (td) element
• table-row-group makes the element behave like a table body row group (tbody) element
• table-header-group makes the element behave like a table header row group (thead) element
• table-footer-group makes the element behave like a table footer row group (tfoot) element
• table-caption makes the element behave like a table caption element
• table-column makes the element behave like a table column (col) element
• table-column-group makes the element behave like a table column group (colgroup) element

Hang on… Aren’t Tables for Layout Wrong?

Perhaps you’re feeling slightly uncomfortable about the example we’ve just seen—after all, haven’t web standards advocates like myself been insisting for years that you shouldn’t be using tables for layout?

The table element in HTML is a semantic structure: it describes what data is. Therefore, you should only use the table element if the data you are marking up is tabular—for example, a table of financial information. If it would normally be stored in a spreadsheet on your computer, it probably needs marking up as a table in HTML.

The table value of the display property, on the other hand, is simply an indi­cation of how something should look in the browser—it has no semantic meaning. Using a table element for your layout tells a user-agent, “This data is tabular.” Using a bunch of divs that have the display property set to table and table-cell says nothing to that user-agent other than asking it to render them visually in a certain way, if it’s capable of doing so.

Of course, we should also take care not to use display: table; on a bunch of div elements when what we really have is tabular data!

Our simple example above makes our layout behave as if it were a single row table with three cells; it doesn’t take much imagination to realize the potential of this technique for creating complex grid layouts with ease.

Anonymous Table Elements

CSS tables happily abide by the normal rules of table layout, which enables an ex­tremely powerful feature of CSS table layouts: missing table elements are created anonymously by the browser. The CSS2.1 specification states:

Document languages other than HTML may not contain all the ele­ments in the CSS 2.1 table model. In these cases, the “missing” elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a “table”/“inline-table” element, a “table-row” element, and a “table-cell” element.

What this means is that if we use display: table-cell; without first containing the cell in a block set to display: table-row;, the row will be implied—the browser will act as though the declared row is actually there.

Let’s use a simple example to investigate this feature: the three-cell grid layout shown below. We’ll look at three different HTML markup samples that will result in the same visual layout.

First, here’s a sample of markup that can be used to generate the three-cell layout:

<div class="container">
  <div class="row">
    <div class="cell">CELL A</div>
    <div class="cell">CELL B</div>
    <div class="cell">CELL C</div>
  </div>
</div>

A set of nested div elements may not seem so very exciting, but hang in there, we’re building to something. The CSS is also very simple:

.container {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  padding: 1em;
}

The CSS above sets the element with a class of ‘container’ to display: table, an element with a class of ‘row’ to display: table-row, and an element with a class of ‘cell’ to display: table-cell, as well as giving it a border and a height and width.

This HTML markup above explicitly creates elements for the table and row surroun­ding the three cells, using all of the CSS classes that we’ve created. However, we can reduce the markup, removing the row div element like so:

<div class="row">
  <div class="cell">CELL A</div>
  <div class="cell">CELL B</div>
  <div class="cell">CELL C</div>
</div>

Even though the above markup is missing the element representing the table row, the row will be created by the browser as an anonymous box. We can reduce the markup even further:

<div class="cell">CELL A</div>
<div class="cell">CELL B</div>
<div class="cell">CELL C</div>

The above markup is missing the elements representing the table row and the table; these are both created as anonymous boxes by the browser. Even with the elements missing in markup, the end product is the same.

Rules for the Creation of Anonymous Table Elements

These anonymous boxes are not created by magic, and they won’t automatically make up for any deficiencies in your HTML code. To be able to take full advantage of anonymous table elements, you’d best become familiar with the rules for their creation. If a layout calls for an implied element, the browser will create an anony­mous box and set its CSS display property to one of table, table-row, or table-cell, depending on the context.

If you have an element that has been set to display: table-cell; but its immediate parent (the containing element) is not set to table-row, an anonymous box set to table-row will be created to enclose the cell and any subsequent adjacent sibling elements that are also set to table-cell, until it encounters an element not set to table-cell, so they’ll all end up in the same row. This is the case with the following markup:

<div class="cell">CELL A</div>
<div class="cell">CELL B</div>
<div class="cell">CELL C</div>
<div>Not a cell</div>

The three div elements above that have a class of ‘cell’ are set to display: table-cell; and will appear side by side as though they’re in a single row table; the last div element won’t be included in the row, because it isn’t set to display: table-cell;.

If an element is set to display: table-row; while its parent element isn’t set to table (or table-row-group), an anonymous box set to display: table; will be created to enclose the row, and any subsequent adjacent sibling elements will be set to display: table-row. Also, if the element with display set to table-row lacks an element set to table-cell directly within it, an anonymous box set to table-cell will be created to enclose all the elements within the table-row element.

Consider the following markup:

<div class="row">ROW A</div>
<div class="row">ROW B</div>
<div>Not a row</div>

The two div elements above with a class of ‘row’ are set to display: table-row; and will appear one under the other as though they’re rows in the same single-column table. The last div element won’t be included in the implied table.

Similarly, if an element is set to any of the other display values that match elements which would naturally exist directly inside a parent table element such as table-row-group, table-header-group, table-footer-group, table-column, table-column-group, and table-caption, but does not have a parent set to display: table;, an anonymous box set to table will be created to enclose the element and any subsequent adjacent sibling elements with suitable display values.

Other Useful Table Properties

When using CSS tables, because the elements conform to the normal rules for table layout, you can also apply other table-related CSS properties. Here’s a few that can come in handy:

table-layout

Setting the table-layout to fixed tells the browser that the table should render with the fixed algorithm for formatting the cell widths. This is useful in a fixed-width layout, such as the one we created earlier.

border-collapse

Just as with regular HTML tables, you can use the border-collapse property to specify that your table layout elements use collapsed (with the value collapse) or separated (with the value separate) borders between the cell elements.

border-spacing

If you specify the value separate for the border-collapse property, you can then use the border-spacing property to specify the width of the space between the cell element borders.

Making a Perfect Grid

Making a grid of equal height elements has always been a challenge using traditional CSS layout techniques, but it’s something to which CSS tables are well suited. For example, if we want to create an image gallery comprising a grid of images with captions, such as the one shown below, using a CSS table renders the task simple.

The markup for our gallery is as follows:

<div class="grid">
  <div class="row">
    <div class="image">
      <img src="images/photo1.jpg" alt="A Lily" />
      <p>A lily in the gardens of The Vyne Country House</p>
    </div>
    <div class="image">
      <img src="images/photo3.jpg" alt="A Fuchsia plant" />
      <p>Fuchsia plant in my garden</p>
    </div>
  </div>
  <div class="row">
    <div class="image">
      <img src="images/photo2.jpg" alt="A crazy looking Allium flower" />
      <p>A crazy looking flower</p>
    </div>
    <div class="image">
      <img src="images/photo4.jpg" alt="A Robin sitting on a fence" />
      <p>
        This robin has been visiting our garden over the summer.
        He is very friendly and doesn't seem to be too worried about sharing the garden with us.
      </p>
    </div>
  </div>
</div>

Each gallery image cell is comprised of an img element and a caption in a p element contained within a div element with a class of ‘image’. Each row is contained within a div element within a class of ‘row’, and the whole gallery is contained within a div with a class of ‘grid’.

The CSS required to lay out our grid is simple:

.grid {
  display: table;
  border-spacing: 4px;
}
.row {
  display: table-row;
}
.image {
  display: table-cell;
  width: 240px;
  background-color: #000;
  border: 8px solid #000;
  vertical-align: top;
  text-align: center;
}
.image p {
  color: #fff;
  font-size: 85%;
  text-align: left;
  padding-top: 8px;
}

The above CSS is fairly straightforward, but you might notice how we’ve made use of the border-spacing property to control the spacing of our gallery image cells. Making a grid layout couldn’t be easier—and we’ve avoided any headaches over equal heights or fragile layouts made with floated elements.

Putting Principles into Practice

This article has presented a basic primer to the usage of the table-related values of the CSS display property—finally, a source of relief for all those struggling to construct reliable grid-based layouts using CSS! We had an introduction to the straightforward approach to layout provided by CSS tables. We explored the various table-related display values available, looked at the nature of anonymous table elements, and discovered some other useful CSS table properties.

The next step is up to you—with any luck, you have realized the potential CSS tables provide for creating grid layouts, and are now bursting with curiosity! Using the knowledge gained in this article, you’re all set up to begin experimenting with your own CSS table layouts and create new techniques.