Home/ Questions/Q 320263
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T08:44:15+00:00

I’m trying to replicate this layout with HTML/CSS: http://reformrevolution.com/ I think I’m getting close

  • 0

I’m trying to replicate this layout with HTML/CSS:

http://reformrevolution.com/

I think I’m getting close to what I need, but I can’t get rid of the vertical space between divs, wich should be equal to the horizontal gap, and I believe the divs are not “going down” in the right order.

Here is the code:

<body>
<div class="Main">
<div class="Diagrama1">
</div>
<div class="Diagrama2">
</div>
<div class="Diagrama3">
</div>
<div class="Diagrama4">
</div>
<div class="Diagrama1">
</div>
<div class="Diagrama3">
</div>
<div class="Diagrama3">
</div>
<div class="Diagrama2">
</div>
<div class="Diagrama1">
</div>
<div class="Diagrama2">
</div>
</div>
</body>

And the CSS:

@charset "UTF-8";
/* CSS Document */

.Main {
overflow:auto;
background-color:#CCC;
display:compact,
}

 .Diagrama1 {
float:left;
width:180px;
height:260px;
background-color:#00F;
margin:15px;    
 }

 .Diagrama2 {
float:left;
width:180px;
height:150px;
background-color:#F00;
margin:15px;
 }

 .Diagrama3 {
float:left;
width:180px;
height:320px;
background-color:#F0F;
margin:15px;
 }

 .Diagrama4 {
float:left;
width:180px;
height:200px;
background-color:#CF0;
margin:15px;
 }

Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The best to keep that dynamic without exploding your head with numbers and positioning is to use JQuery and the huge amount of plugins created for that kind of stuff:
    http://mos.futurenet.com/pdf/computerarts/ART162_tut_dw2.pdf

    http://www.chazzuka.com/blog/?p=47

    • 0