Using multiple column layout with HTML 5 and CSS 3

Sunday, September 16, 2012

ASP.NET css3 html5

This is going to be the fourth post in a series of posts regarding HTML 5. You can find the other posts here , here and here.

In this post I will provide a hands-on example with HTML 5 and CSS 3 on how to create a page with multiple columns and proper layout.

I will show you how to use CSS 3 to create columns much easier than relying on DIV elements and the float CSS rule.

I will also show you how to use browser-specific prefix rules (-ms for Internet Explorer and -moz for Firefox ) for browsers that do not fully support CSS 3.

In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.

Another excellent resource is HTML 5 Doctor.

Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.

I will create a simple page with information about HTML 5, CSS 3 and JQuery.

This is the full HTML 5 code.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML 5, CSS3 and JQuery</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
    <div id="header">
      <h1>Learn cutting edge technologies</h1>
      <p>HTML 5, JQuery, CSS3</p>
    </div>
    <div id="main">
      <div id="mainnews">
        <div>
          <h2>HTML 5</h2>
        </div>
        <div>
          <p>
            HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.
          </p>
          <div class="quote">
            <h4>Do More with Less</h4>
            <p>
             jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

            </p>
          </div>
          <p>
            The HTML5 test(html5test.com) score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. Even though the specification isn't finalized yet, all major browser manufacturers are making sure their browser is ready for the future. Find out which parts of HTML5 are already supported by your browser today and compare the results with other browsers.
            The HTML5 test does not try to test all of the new features offered by HTML5, nor does it try to test the functionality of each feature it does detect. Despite these shortcomings we hope that by quantifying the level of support users and web developers will get an idea of how hard the browser manufacturers work on improving their browsers and the web as a development platform.</p>
        </div>
      </div>

      <div id="CSS">
        <div>
          <h2>CSS 3 Intro</h2>
        </div>
        <div>
          <p>
          Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
          </p>
        </div>
      </div>

      <div id="CSSmore">
        <div>
          <h2>CSS 3 Purpose</h2>
        </div>
        <div>
          <p>
            CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).
          </p>
        </div>
      </div>


    </div>
    <div id="footer">

    <p>Feel free to google more about the subject</p>

    </div>

</body>

</html>

The markup is very easy to follow. I have used some HTML 5 tags and the relevant HTML 5 doctype.

The CSS code (style.css) follows

body{
        line-height: 30px;
        width: 1024px;
        background-color:#eee;
      }

      p{

    font-size:17px;
    font-family:"Comic Sans MS"
      }
      p,h2,h3,h4{
        margin: 0 0 20px 0;
      }

      #main, #header, #footer{
        width: 100%;
        margin: 0px auto;
        display:block;
      }

      #header{
        text-align: center;
        border-bottom: 1px solid #000;
        margin-bottom: 30px;
      }

      #footer{
        text-align: center;
        border-top: 1px solid #000;
        margin-bottom: 30px;
      }

      .quote{
       width: 200px;
       margin-left: 10px;
       padding: 5px;
       float: right;
       border: 2px solid #000;
       background-color:#F9ACAE;
      }

      .quote :last-child{
        margin-bottom: 0;
      }

      #main{
        column-count:2;
        column-gap:20px;
        column-rule: 1px solid #000;
        -moz-column-count: 2;
        -webkit-column-count: 2;
        -moz-column-gap: 20px;
        -webkit-column-gap: 20px;
        -moz-column-rule: 1px solid #000;
        -webkit-column-rule: 1px solid #000;
      }

All the rules in the css code are pretty simple. The layout is achieved with that CSS rule

#main{
        column-count:2;
        column-gap:20px;
        column-rule: 1px solid #000;
        -moz-column-count: 2;
        -webkit-column-count: 2;
        -moz-column-gap: 20px;
        -webkit-column-gap: 20px;
        -moz-column-rule: 1px solid #000;
        -webkit-column-rule: 1px solid #000;

Do note the column-count,column-gap and column-rule properties. These properties make the two column layout possible.

Please have a look at the picture below to see why I used prefixes for Chrome (webkit) and Firefox(moz).It clearly indicates that the CSS 3 column layout are not supported from Firefox and Chrome.