views:

382

answers:

3
+1  Q: 

Css fluid layout

Hi,

Im trying to replicate this layout with html/css:

http://reformrevolution.com/

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.

A: 

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.

Josh Leitzel
The widht is fixed but the height is to be adjusted to content, due to lack of content at the moment im using css to provide different height for testing the layout, my idea is to have it adjust to the user browser window width.
Marvin
Im using classes because all of the divs will be generated with php, I will just really need one class but to test the layout and keep it simple for now im only using a few divs and fixed properties with css ;)
Marvin
What's the point of using classes "just for now"? There's absolutely no difference between using a class and an id in your example, so how does it make it any easier?
Josh Leitzel
All of the divs will be generated trough php as so they wont be unique but rather share a class either way you do have a point, and there is a sloopy coding job right there ;)
Marvin
+1  A: 

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://www.google.com/url?sa=t&amp;source=web&amp;ct=res&amp;cd=1&amp;url=http%3A%2F%2Fmos.futurenet.com%2Fpdf%2Fcomputerarts%2FART162%5Ftut%5Fdw2.pdf&amp;ei=imyNSvP0E9-Ttge877zhDQ&amp;usg=AFQjCNEJpWCFjD4-BM7VhKPCGWRE8sFT0w&amp;sig2=Q9XOH4VSh%5FBC5FstEqVzpQ

http://www.google.com/url?sa=t&amp;source=web&amp;ct=res&amp;cd=2&amp;url=http%3A%2F%2Fwww.chazzuka.com%2Fblog%2F%3Fp%3D47&amp;ei=imyNSvP0E9-Ttge877zhDQ&amp;usg=AFQjCNHtzUewsD-Y0xJaCC7xcBlbkEtmoA&amp;sig2=qVkAKa0n25We0FkP8h3nbA

Santi
Sorry, wrong link, updated now. Hope you find a css solutions then.
Santi
Hey, that first link is really interesting and although it uses jQuery it might just solve my problem, im testing it, Thank you.
Marvin
Just wanted to say that the first link helped me achieve the intended layout though I had to use jQuery, its not the solution I hoped for nor do I know if there is one but it is one that works pretty well. In case the link breaks Its a Tutorial from Computer Arts magazine June of 2009 titled: Create a Liquid Grid Design, by Ben Wise.For now Ill mark this answer as the correct one. Thank you Santi
Marvin
+1  A: 

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
dassouki
Hi, could you please elaborate why it is a bad practice to mix margins/padding's with widths/heights, is there a better alternative to achieve the separations of divs?The two resources you linked are very useful, thanks.
Marvin
tip4 http://net.tutsplus.com/tutorials/html-css-techniques/10-principles-of-the-css-masters/
dassouki
I've seen Jonathan Snook tip and I realize were your critic apply, thank you for taking the time to reference it.
Marvin