Divide tumblr posts with ODD and EVEN

Question

I'm making a custom theme in tumblr for my personal portfolio.

I'm trying to implement this image. So i thought in tumblr i could divide the blue posts in ODD and the red ones in EVEN. In my file, the HTML and CSS work just fine but in tumblr I'm having a bit problems with this.

HTML:

      {block:posts} 

       {block:odd}      
        <div id="main-container" >
        {block:Photo}        
            <div class="post-wrapper">



            <div style="background: url('{PhotoURL-HighRes}') center                 center no-repeat;    width: 250px;
             height: 420px;
             float: left;"></div> 
             </div>
        {/block:Photo} 


        </div>
    {/block:odd} 



    {block:Even} 

         <div id="main-container_bot">
            {block:Photo}      
            <div class="post-wrapper_bot">
                <div style="background: url('{PhotoURL-HighRes}') center 
                center no-repeat;    width: 250px;
                 height: 420px;
                  float: left;"></div> 
            </div>       



            {/block:Photo}      
</div>
    {/block:Even}

     {/block:posts}

CSS:

#main-container {
    background-color:#fff;
    margin-left:422px;
    margin-top:150px;
}

.post-wrapper {
    position: relative;
    width: 250px;
    height: 420px;
    float: left;
    background-color:blue;
    -webkit-clip-path: polygon(50% 100%, 100% 50%, 50% 0, 0 50%);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

#main-container_bot {
    margin-left:547px;
    margin-top:210px;
    position:absolute;
}

.post-wrapper_bot {
    position: relative;
    width: 250px;
    height: 420px;
    float: left;
    background-color:red;
    -webkit-clip-path: polygon(50% 100%, 100% 50%, 50% 0, 0 50%);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;     
}

This works just fine outside tumblr, but in tumblr, doesnt work. I think that problably its about this "position:absolute;" but i realy dont have a clue how to fix it. Please can anyone help me fixing this?

Answer 1

Working Example

HTML

<div id="content">

  {block:Posts}

    {block:Photo}
      <div class="wrapper-{block:Odd}top{/block:Odd}{block:Even}bot{/block:Even}">
        <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
      </div>
    {/block:Photo}

  {/block:Posts}

</div>

CSS

#content {
  background-color:#fff;
  width: 1000px;
}
.wrapper-top {
  position: absolute;
  width: 250px;
  height: 420px;
  display: inline-block;
  background-color:blue;
  -webkit-clip-path: polygon(50% 100%, 100% 50%, 50% 0, 0 50%);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.wrapper-bot {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 420px;
  top: 210px;
  left: 125px;
  background-color:red;
  -webkit-clip-path: polygon(50% 100%, 100% 50%, 50% 0, 0 50%);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#content img {
  height: 420px;
  width: 250px;
}

Here is a JSFiddle to demonstrate.

Now, all that said, you're going to run into trouble if a photo doesn't have a HighRes URL and you'll have to figure out how to deal with non-photo posts.