CSS Positioning Pictures Next To Each Other

I have been working on trying to position the pictures next to each other in CSS for a Facebook welcome page, which can be found here.

Here is the CSS:

table {
    border-collapse: collapse;
}

th, td { 
    margin: 0;
    padding: 0;
}

div.nav {
    width: 520px;
    margin: 0 auto;
    text-align: center;
}

div.nav1
{
/*height: 165px;*/
width: 136px;
background-image:url("http://i971.photobucket.com/albums/ae198/smilehealthy/internships-link.jpg");
float: left;
}

div.nav1 a, div.nav1 a:link, div.nav1 a:visited {
display:block;
}

div.nav1 img {
/*width:100%;
height:100%;*/
border:0;
}

div.nav1 a:hover img {
visibility:hidden;
}

div.nav2
{
/*height: 165px;*/
width: 193px;
back开发者_JAVA技巧ground-image:url("http://i971.photobucket.com/albums/ae198/smilehealthy/website-link.jpg");
float: left;
}

div.nav2 a, div.nav2 a:link, div.nav2 a:visited {
display:block;
}

div.nav2 img {
/*width:100%;
height:100%;*/
border:0;
}

div.nav2 a:hover img {
visibility:hidden;
}

div.nav3
{
/*height: 165px;*/
width: 102px;
background-image:url("http://i971.photobucket.com/albums/ae198/smilehealthy/education-link.jpg");
float: left;
}

div.nav3 a, div.nav3 a:link, div.nav3 a:visited {
display:block;
}

div.nav3 img {
/*width:100%;
height:100%;*/
border:0;
}

div.nav3 a:hover img {
visibility:hidden;
}

div.nav4
{
/*height: 165px;*/
width: 89px;
background-image:url("http://i971.photobucket.com/albums/ae198/smilehealthy/programs-link.jpg");
float: left;
}

div.nav4 a, div.nav4 a:link, div.nav4 a:visited {
display:block;
}

div.nav4 img {
/*width:100%;
height:100%;*/
border:0;
}

div.nav4 a:hover img {
visibility:hidden;
}#container {
    margin: 0 auto;
}

your CSS isn't being applied to that page at all. Facebook scrambles all the file names so it's hard to tell what is going on, but your FBML is incorrect somehow and the CSS isn't being loaded.

Suggestion: make a separate non-FB version and post that to resolve your CSS issues, then post that.