Search code examples
javascripthtmlcsstabular

Animated div within a div rising from the bottom

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.

Solution

  • 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;
}