Testing HTML5 & CSS3

Main Contet & the Aside

The content area and sidebar are going to be aligned beside each other. Traditionally you would do this by using floats, but in CSS3 we are going to use tables!

"What?! Tables?" you might ask and look confused. You probably learned years ago that using tables for web layout is a big no-no, and it still is. You should never use the table-element to mark up a layout. However, in CSS3 we can make elements behave like tables without it ever showing in the markup.

To start off with, we're going to need some divs to group the sections in a more logical manner.

< div id="content">
< div id="mainContent">
< section>xxxx xxxxxx xxxx< /section>
< section id="comments"> xx xxxxxxxxx
< /section>
< form>xxx xxxxxx x< /form>
< /div>(end of main content div)
< aside>xxx xxxxx< /aside>
< /div> (end of content div)

Everything still makes sense semantically, but now we can style it. We want the #content div to behave like a table, with two table cells, #mainContent and aside. With CSS3, this is very easy:

#content {
display: table;
}

#mainContent {
display: table-cell;
width: 620px;
padding-right: 22px;
}

aside {
display: table-cell;
width: 300px;
}

That's all! No more floating, faux column background images, clearing or collapsing margins. By setting the property declaration to table-cell the elements of the page behave as if they were cells of a table.

The aside element is to the side of the page, as its name suggests. It is within the content of the content div but outside of the main content div thus removing it from the flow of the main content.

By making the elements behave like a table, its makes it much easier for us to create visually apealing layouts.

Multiple columns of text were previously impossible without manually splitting the text, but with CSS3 it's a piece of cake. With cirrent browsers however, we have to add a div around the multiple paragraphs for this to work, see the example below.

< div>
< p>Lorem ipsum dolor sit amet...< /p>
< p>Pellentesque ut sapien arcu...< /p>
< p>Vivamus vitae nulla dolor...< /p>
...
< /div>

So now there is the class called, in this calse blogPost and there is a devision within it. Now we can add two simple properties and call it a day.

.blogPost div {
column-count: 2;
column-gap: 22px;
}

The stlye rules show that we want two columns and a gap of 22px between the columns.

The additional div is needed because there is currently no supported way of making an element span more than one column, it has to be a div instead. In the future however you'll be able to specify the column-span property, and we'll be able to just write:

.blogPost {
column-count: 2;
column-gap: 22px;
}
.blogPost header {
column-span: all;
}

Of course the column-count and column-gap properties are only supported by some browsers, Firefox and Safari. For now we have to use the vendor-specific properties, shown below.

.blogPost div
{
-moz-column-count: 2;
-moz-column-gap: 22px;
-webkit-column-count: 2;
-webkit-column-gap: 22px;
border-bottom: none 1px #d7d7d7;
}