0

I have a main div inside which i have to create multiple div with specific height and width and arrange in rows and columns. For e.g 5 Rows and 8 columns. Each div height is 80px and width is 75px. How to achieve this?

I Tried:

$(document).ready(function() {
 for(var i = 1; i <= 40; i++) {
  $('#test').append('<div id="page' + i + '" class="touch">TESTING</ div>' )
 }
}

HTML: 

<div id="test">
</div>

3 Answers3

1

Use the following styles to create your div table structure...

.table {
    display:table;
    width: 100%;
}
.row {
    display:table-row;
    width: 100%;
    height: 80px;
}
.cell {
    display:table-cell;
    width: 75px; 
    vertical-align: middle;
}

This code whould give you teh idea on how it will work [Probably this is not completely workis as I did not test it out but you should get an idea on how]

$(document).ready(function() {
    for(var i = 1; i <= 5; i++) {
        $('#test').append('<div class="row">' );
        for(var j = 1; j <= 8; j++) {
            $('#test').append('<div id="page' + i + '" class="touch cell">TESTING</ div>' );
        }
        $('#test').append('</ div>' );
    }
}
Cerbrus
  • 70,800
  • 18
  • 132
  • 147
Techmonk
  • 1,459
  • 12
  • 20
  • Why on earth would you want to use CSS to make `
    ` elements behave _exactly_ like tables? Just use `` elements if one needs to display data in a tabular format. That's what they're made for.
     – Cerbrus Feb 15 '13 at 08:12
  • 1
    He wants to have divs.... and there are many reasons you might want divs to look like tables http://stackoverflow.com/questions/819237/div-element-instead-of-table – Techmonk Feb 15 '13 at 08:13
  • On the accepted answer there, point `1` doesn't apply here, since he's talking about displaying tabular data (I have yet to see a site with `80px * 75px` cells), `2` really doesn't count for anything if you're `.appending` each div instead of just building it all up and appending it in one go, and `3` is just an opinion, and as such has no place on SO, as an answer. Besides, sometimes what an OP wants isn't the best way to do something. Any way, Techmonk, at least cache the HTML structure you're building and append it all in one go. – Cerbrus Feb 15 '13 at 08:24
  • Also, most of the answers on there mention that there is nothing evil about tables if they're used to display tabular data. – Cerbrus Feb 15 '13 at 08:30
  • I agree with your reasoning, what I meant to say was that there could be a reason that someone wants div and not table there is nothing wrong with wanting to use div's over table. It is acceptable if he wants divs and he can do it with div. And yes I should cache it, though I am not even sure if adding it like that would work ( I guess appending an opened div will automatically trigger a closing div to be added) but I just wanted to give him an idea on how to do this and not the actual code. – Techmonk Feb 15 '13 at 08:34
  • I am not saying table's are wrong I am defending that using div's for that purpose is not wrong – Techmonk Feb 15 '13 at 08:36
  • Fair enough in that case. `.append`-ing a `"
    "` will also add a closing tag. So, in this case, building a string first might even be the only option (Aside from actual DOM manipulation)
     – Cerbrus Feb 15 '13 at 08:39
0

I think there are several ways to approach this task but I would try to solve it with css floating. You can float a div and it loses it block behaviour so several divs can be in one row. If you float all divs to the left for example and if you give the main div a width of 640px then exactly 8 divs should row up in the main div...

#maindiv {
    width: 640px;
}

.divcells {
    width: 80px;
    height: 75px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    float: left;
    display: block;
}

$(document).ready(function() {
    for(var i = 1; i <= 40; i++) {
        $('#maindiv').append('<div id="page' + i + '" class="divcells">TESTING</ div>' )
    }
}

Then you just have to add with javascript as much cell divs as you want to the main div. Make sure that the word "TESTING" doesnt exceed 80px otherwise you should add overflow to the div cells.

MeiSign
  • 1,487
  • 1
  • 15
  • 39
0

If you're not absolutely stuck to using divs, you might as well use a table:

$(document).ready(function() {
    var output = '<table>\n<tr>\n';
    for(var i = 0; i < 40; i++) {       // The `40` here is the amount of cells.
        if(i % 5 == 0 && i > 0){        // The `5`  here is the amount of rows.
            output += '</tr>\n<tr>\n';
        }
        output += '<td id="page' + (i+1) + '" class="touch">TESTING</ td>\n';
    }
    $('#test').append(output + '</tr>\n</table>';)
}

Tables are made to do exactly what you need, display data in a grid.

Cerbrus
  • 70,800
  • 18
  • 132
  • 147