# make the fiddle cleaner

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

Following is my HTML body:

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

</div>

</div>

</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">
<tr>
<th>
My Table
</th>
<th>
Column 1
</th>
<th>
Column 2
</th>
</tr>
<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;
}
height: 160px;
background-color:black;
width: 960px;
position: relative;
}#logo{
position: absolute;
width:300px;
height:140px;
left:40px;
background-color: grey;
top: 10px;
}
position: absolute;
width:140px;
height:140px;
right:40px;
background-color: grey;
top: 10px;
}
#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;
}

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";

//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){
}
});
}
},
error: function(e) {
console.log(e.message);
}
});


Above is the fiddle I want to make cleaner.

• We ask that you post your code in your question. This makes it easier to look at, and links like you have posted sometimes expire, so if somebody is looking at this in the future they code might not be there. – Jeff Vanzella Sep 26 '12 at 15:57
• At least one user that has understood of this site works ;) – hakre Sep 26 '12 at 15:57
• Cleaner in what way? Better to read? Or using better techniques? My first suggestion would be to use less absolute positioning and fixed pixel sizes. – RoToRa Sep 27 '12 at 10:59

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.

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"