Animated div within a div rising from the bottom

Question

http://www.canvasmagazine.net/

Could somebody advice on me how these people have managed to produce this square based layout as I have tried tables and divs but can not get the page layout to look the same, I love the way the content and images have been displayed.

Answer 1

Create cells and float them.

HTML:

<div id="container">
   <div id="cell1">
      <div>Article1</div>
      <div>Article2</div>
   </div>    
   <div id="cell2">
      <div>Article3</div>
      <div>Article4</div>  
   </div>  
   <div id="cell3">3</div>  
</div>

CSS:

#container{
    width: 100%;
    overflow: hidden; 
}

#cell1{
    float: left;
    width: 33%;
    background-color:red;
}
#cell2{
    float: left;
    width: 33%;
    background-color:blue;
}
#cell3{
    float: left;
    width: 33%;
    background-color:green;
}

Answer 2

Each column is one div, which different divs inside it.

Answer 3

put these dices inside your body

   <div class="column-center">Column center</div>
   <div class="column-left">Column left</div>
   <div class="column-right">Column right</div>

put these css codes to your css file

.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }

add what ever your contents to the relevant div using spans for easy line breaks.

hope this helps

Answer 4

It's pretty simple, I've taken the HTML/CSS they've used and simplified it here http://jsfiddle.net/gzda5/1/

You just need to set the div widths and float the columns correctly.

On the left column:

float: left;

On the right column:

float: right;