How to create column with CSS3

How to create column using CSS3

In order to create (float) a colum using CSS3 you need to perform to simple steps:
1. Set its width
2. Set keyword 'float'

Click here to download the 'Before' HTML if you'd like to follow along with the article.

The first I'm going to do is take the section that starts with 'Lorem ipsum'

<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere, urna ut pulvinar sagittis, leo leo aliquam dui, eu iaculis nisl risus at lectus. Nunc tincidunt, odio vulputate dignissim sagittis, lectus sapien fermentum neque, ut accumsan est nibh id sapien. Etiam in nulla eget mi condimentum hendrerit vel a turpis. Cras eget nibh euismod, auctor purus eget, iaculis urna. Vestibulum odio nulla, dictum quis turpis ut, laoreet viverra erat. Cras ut leo eget magna imperdiet vulputate a vitae justo. In dui ante, tincidunt nec porta eu, ullamcorper a odio. Phasellus in purus elit. Mauris ac faucibus magna. Quisque auctor nec dolor eget egestas. Quisque eget ante ut velit interdum eleifend. Vivamus sodales dapibus felis scelerisque auctor.
</p>
</section>

and add a new 'class' to it:

<aside class="sidecolumn">

<section>...........</section></aside>

<aside> is an HTML5 keyword that "consists of content that is tangentially related to the content around", but it also allows me to link CSS to it.

Let's create the CSS class for it that will go between the <style>...</style> tags:

.sidecolumn
{
float:right;
width: 200px;
  margin-top: -50px;
}


The sidebar will float to the right, with width of 200 pixels and decreased top margin by 50 pixels so that it fits our page nicely.
This will actually create a sidebar. We can improve by marking-off the main section and creating a small gutter between the main section and the sidebar itself - so that it doesn't look like it's running into one another.

In order to do that, I'm going to add a <div> for the entire main section - it will go right after the closing of </aside> and right before the beginning of the <footer> section.

<div class="mainSection">

It's looking much better, but I'd like that image to be also positioned to the right so I'm going to add a class to the image itself.

img class="image"

<a href="http://photobucket.com/images/programmer" target="_blank"><img class="image" src="http://i111.photobucket.com/albums/n135/orion43B/funny/programmer.jpg" border="0" alt="programmer photo: programmer programmer.jpg"/></a>

Let's add the necessary CSS for it:

.image{  width: 150px;   height: 150px;  margin: 10px;  float:right; }

This is pretty much it. You can download both and before html files here:

• Before
• After