CODEWITHSUNDEEP
htmlcsslayout
Marvin
Marvin

Reputation: 513

Css fluid layout

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?

Upvotes: 1

Views: 805

Answers (3)

Santi
Santi

Reputation: 4468

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

Upvotes: 1

dassouki
dassouki

Reputation: 6366

some notes on your css

  • It's usually bad practice to mix, margins/paddings with widths/heights. Choose one system. Tip 4 from this article
  • I think you'll have better success using a grid system. They're a bit tough to start with, but they work great
  • If you don't want a grid, try this article that i find very useful in the css world

Upvotes: 1

Josh Leitzel
Josh Leitzel

Reputation: 15219

Since you have exact heights and widths for all the boxes and you seem to have an idea of the exact place they should go, you might be better off just using absolute positioning. You'll be able to control everything better that way.

Also, you should use ids for those <div>s, not classes, since they're only going to be used once.

Upvotes: 0

Related Questions