make the fiddle cleaner

Question

http://jsfiddle.net/hrishikeshp19/VyDsu/21/

Following is my HTML body:

<div id="header">
<div id="logo">

</div>
<div id="headercontent1">

</div>
<div id="headercontent2">

</div>

</div>
<div id="buttons-container">
</div>
<div id="panels-container">
    <div id="panel1"></div>
        <div id="panel2"></div>
        <div id="panel3"></div>
</div>
<div id="table-container">
<table id="my-table">
<thead id="my-table-head">
<tr> 
<th>
    My Table
</th>
<th>
    Column 1
</th>
<th>
    Column 2
</th>
</tr>
</thead>
<tbody id="my-table-body">
<tr class="tr-odd">
<td>Row 1</td>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>    
</tr>
<tr>
<td>Row 2</td>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>    
</tr>
<tr class="tr-odd">
<td>Row 3</td>
<td>Row 3 Column 1</td>
<td>Row 3 Column 2</td>    
</tr>

    </tbody>
</table>    
</div>
<div id="gallery">
</div>
​

following is my css:

body{
    position: relative;
}
#header{
height: 160px;
    background-color:black;
    width: 960px;
    position: relative;
}#logo{
    position: absolute;
    width:300px;
    height:140px;
    left:40px;
    background-color: grey;
    top: 10px;
}
#headercontent2, #headercontent1{
    position: absolute;
    width:140px;
    height:140px;
    right:40px;
    background-color: grey;
    top: 10px;
}
#headercontent1{right:200px;}
#buttons-container{
    position:absolute;
    top:180px;
    left:0px;
height:60px;
    width:960px;
    background-color:black;
}
#panels-container{
    position:absolute;
    top:260px;
    left:0px;
}
#panel1,#panel2,#panel3{
    position:absolute;
    left:0px;
    height:300px;
    width:300px;
    background-color:cyan;
}
#panel2{
        left:320px;
}
#panel3{
        left:640px;
}

#table-container{
    position:absolute;
    top:580px;
    left:0px;
    width:960px;
    background-color:white;
}
#my-table{
    width:960px;
border-color: black;
    border-width: 1px;
    border-style: solid;
}

#my-table-head th{
    background-color: grey;
    height:50px;
    text-align:center;
    width: 320px;
}
#my-table-body tr{
    text-align:center;
    background-color:grey;
    height: 50px;
}

#my-table-body td{
    text-align:center;
    border-color: black;
    border-width: 1px;
    border-style: solid;
    width: 320px;
}

#my-table .tr-odd{
background-color:white;
}

#gallery{
    position:absolute;
    top:800px;
        left:0px;
    width: 960px;
    height:400px;
    background-color:blue;
    overflow:hidden;
}
​

and the javascript:

var url = "http://numberonelarge.com/tapjoy/jsonp.php?callback=yourcallbackfunction";

var images_ready = function(images){
    //sort the images, sorting based on height of images, this is called as greedy strategy
    for(var i=0,len=images.length;i<len;i++){
        for(var j=i+1;j<len;j++){
            if(images[i].height<images[j].height){
                var temp = images[j];
                images[j]=images[i];
                images[i]=temp;                    
            }
        }
    }
    images.reverse();//arrange in ascending order
    //assumption 1: all images of constant width
    var img_width = 160;
    var row_limit = $("#gallery").width()/img_width;
        for(var i=0,len=images.length;i<len;i++){
            $(images[i]).css({"left":img_width*(i % row_limit)});
            if(i-row_limit>=0){
$(images[i]).css({"top":images[i-row_limit].height+parseInt($(images[i-row_limit]).css("top"))});                
            }            
            else{
                $(images[i]).css({"top":0});                
            }
            $("#gallery").append(images[i]);
        }
}

$.ajax({
   type: 'GET',
    url: url,
    async: false,
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
        var images = [ ];
        for (var i=0,len=json.length;i<len;i++){
            var img = $('<img />').attr({ 'id':'img_'+i, 'src': json[i]}).css({"position":"absolute"}).load(function(){
                images.push(this);
                if(images.length == len){
                    images_ready(images);
                }              
            });
        }             
    },
    error: function(e) {
       console.log(e.message);
    }
});

Above is the fiddle I want to make cleaner.

Answer 1

The code you posted doesn't have must meaning to me and it's hard to follow.

Here are a few guidelines to follow to improve your code quality.

1) Format your code.

Formatting makes your code easier to read and maintain.

2) Add some comments

It looks like you posted a basic template. It would be nice if you added a comment about the overall purpose of each section.

3) Try out a css framework.

Creating a layout that is consistent among various browsers is challenging. CSS frameworks were created to solve just that problem. Here's a popular framework called blueprint.

4) Learn how to create meaningful names.

What's the purpose of this table?

<table id="my-table">

Can you guess what this table is for?

<table id="yearlySalesTable">

You should read this question over at stackoverflow.com called "How to name variables"