rendering multiple div using float and position absolute

[raymund2012]

Hi,

I am getting trouble displaying multiple div that will inline row and col.
I really appreciate if anyone could help me to get the exact routine, we there it is using CSS or Javascript or PHP programming laungauges.

I have attached a screenshot to have clear view on what exactly i want.




Thanks,
Raymund

[PeejAvery]

[ moved thread ]

[PeejAvery]

Welcome to the forums raymund2012. Note that this is a CSS issue, not any server-side language.

As for your problem, just create 3 divs side-by-side (float). Then create the 3 vertically inside each of those.

[raymund2012]

Hi PeejAvery's,

Thank you for your quick response.

To give you more on detail i want to display a 30 articles loop each article individually assign individual div box area. The width is fix to 350px but the height is AUTO, No problem with displaying the div floating from left.

My biggest challenge is the rest of the following div how am i suppose to display it vertically take note that the div is inside the loop and should be same like what is in the picture?


Thanks,
Ray

[PeejAvery]

You should have been more specific in your original post. So are you saying that you have these in some sort of PHP array you need to then output into HTML/CSS? Please clarify.

[raymund2012]

Correct it is a sort of Array using PHP

Here's my code.
-------------------

for($i=0;$i<30;$i++)
 echo "<div id=\"main-article-grid\" style=\"background:#fff; width:1280px; height:3200px;\">";
{
  echo "<div id=\"article-grid$post_id\" style=\"cursor:pointer; width:350px; height:auto; overflow:hidden; float:left; margin:10px; background-color:#fff\">";
          echo "<div id=\"article-category\">".$category->cat_name."</div>";
        echo "<div id=\"article-images\">".$images."</div>";
        echo "<div id=\"article-content\">".$content."</div>";
  echo "</div>";
 }
 echo "</div>"; 

and see below attached are the result floating the DIV at the left is OK but the following DIV is not line vertically to the first render DIV at the top. There's a gap or space because it is floating from left. Please compare the first image that i attached to this image to make more clear.

[PeejAvery]

http://vanilla-masonry.desandro.com/

[raymund2012]

Hi PeejAvery,

Great!
That's solve my problem. =)


Many Thanks,
Raymund