Hi,
Im trying to replicate this layout with html/css:
I think im getting close to what I need, but I cant seem able to 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 =)
Thanks.