CODEWITHSUNDEEP
jqueryhtmlcss
luke
luke

Reputation: 118

Make a grid/fluid layout just like old tables but with divs/css/jquery

One of my client (which has it's own graphic agency -> meaning I must do what they want) gave a though layout to implement see example image:

An example image can be found here: https://dl.dropbox.com/u/1857982/grid.gif

I got it to work with an old fashioned table, although I hated myself so much that I'm trying to find an other way around..expecially because I'd like to possibly add some fluid responsive behavior..

I would like to avoid setting display:table-cell and so on, because of lack of support: yes they don't mind using IE7.5 and I can't say "hey update your cr*** browser"

Floating divs don't work because they wouldn't allow me to do that type of grid...

So I was going to ask you: is there any good jquery that helps me on that?

I saw a few of them but I'm not sure (i'm testing) if I can stick perfectly in my container just as the image I attached...

Currently testing: http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/ http://www.wookmark.com/jquery-plugin

If anyone has a suggestion or a personal experience I'd really appreciate a feedback, thank you guys!

Luke

Upvotes: 0

Views: 5739

Answers (4)

mistersender
mistersender

Reputation: 256

different approach, basically just using divs and css with percentages. the html is a bit uglier than i would like, but it is better than tables, and we know something is gonna be ugly in this case

http://jsfiddle.net/sw29M/1/

<div class="wrapper">
<div class="row">
  <div class="column">
    <div class="one item">a</div>
    <div class="two item">b</div>
  </div>
  <div class="column item three">c</div>
  <div class="column">
    <div class="two item">d</div>
    <div class="one item">e</div>
  </div>
</div>
<div class="row">
  <div class="column item double four">a</div>
  <div class="column">
    <div class="two item">b</div>
    <div class="one item">c</div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="one item">a</div>
    <div class="five item">b</div>
  </div>
  <div class="column item three">c</div>
  <div class="column">
    <div class="two item">d</div>
    <div class="one item">e</div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="two item">a</div>
    <div class="one item">b</div>
  </div>
  <div class="column">
    <div class="one item">a</div>
    <div class="two item">b</div>
  </div>
  <div class="column three item"></div>
</div>
</div>

.one{
 background: #fff;
}
.two{
 background: #222;
}
.three{
 background: #999;
}
.four{
 background: #ccc;
}
.five{
 background: #ddd;
}
.wrapper{
 height: 100px; /*this will define the height of the box*/
}
.row{
 height: 100%;
 width: 100%;
}
.row:after{ /* clearfix */
  content: "";
  display: table;
  clear: both;
}
.row .column{
 width: 33%;
 float: left;
 height: 100%;
}
.row .column.double{
 width: 66%;
}
.row .column .item{
 height: 50%;
 width: 100%;
}

Upvotes: 1

mistersender
mistersender

Reputation: 256

you can always use absolute positioning, but that would be a very rigid design. something like this perhaps?

.one, .two, .three, .four{
 position: absolute;
 top: 0;
 left: 0;
}

.one, .two{
 width: 200px;
 height: 100px;
}
.two{
 background: #222;
}
.three{
 width: 200px;
 height: 200px;
 background: #666;
}
.four{
 width: 400px;
 height: 200px;
 background: #ccc;
}
.two.location{
 top: 100px;
}
.three.items{
 left: 200px;
}
.one.more{
 top: 100px;
 left: 300px;
}

<div class="one main"></div>
<div class="two location"></div>
<div class="three items"></div>
<div class="one more"></div>

Upvotes: 0

Jeffrey Ray
Jeffrey Ray

Reputation: 1264

I think what you want to use is Masonry

Upvotes: 1

imbask
imbask

Reputation: 165

To be honest, I don't think you'll find an easy way out by using jQuery/css for this particular problem. You could probably make it work with a lot of floating divs if you really don't want to use tables(it is possible, but not that convenient).

IMO and considering the fact that they'll use old browsers, table might just be the right thing to use

Upvotes: 0

Related Questions