cant get images to gof form left to right

[li0id]

im tring to get my images to go form leftto right in one of my divs, but instead it goes fomr top to bottom. heres the cite its on, its at the middle of the page my site (http://www.myspace.com/li0id)

and heres the css that im working with(the bolded text is what im refering to):



<style type="text/css">
body {
font-family: helvetica, arial, sans-serif;
font-size: 62.5%;
background-color: 444444;
}

table, td {
background-color: 444444;
}

.main{
position:absolute;
left:50%;
top:125px;
width:850px;
z-index:1;
margin-left:-430px;
}

.main a:link, .main a:active, .main a:visited {
color: ffc71c;
text-decoration: none;
font-size: 1em;
}

.main a:hover {
color: ffffff;
}

a img {
border: 0;
filter:alpha(opacity=90);
..-opacity: 0.90;
opacity: 0.90;
}

a:hover{
filter:none
}


.friend01{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/andreana1.jpg) top left no-repeat;
display: block;} .friend01:hover{background: url(http://img.photobucket.com/albums/v179/li0id/andreana1.jpg) bottom left no-repeat;}
.friend02{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/brian1-1.jpg) top left no-repeat;
display: block;} .friend02:hover{background: url(http://img.photobucket.com/albums/v179/li0id/brian1-1.jpg) bottom left no-repeat;}
.friend03{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/ammber1.jpg) top left no-repeat;
display: block;} .friend03:hover{background: url(http://img.photobucket.com/albums/v179/li0id/ammber1.jpg) bottom left no-repeat;}
.friend04{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/frank.jpg) top left no-repeat;
display: block;} .friend04:hover{background: url(http://img.photobucket.com/albums/v179/li0id/frank.jpg) bottom left no-repeat;}
.friend05{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/amanda1.jpg) top left no-repeat;
display: block;} .friend05:hover{background: url(http://img.photobucket.com/albums/v179/li0id/amanda1.jpg) bottom left no-repeat;}
.friend06{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/raalph1.jpg) top left no-repeat;
display: block;} .friend06:hover{background: url(http://img.photobucket.com/albums/v179/li0id/raalph1.jpg) bottom left no-repeat;}
.friend07{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/bekka1.jpg) top left no-repeat;
display: block;} .friend07:hover{background: url(http://img.photobucket.com/albums/v179/li0id/bekka1.jpg) bottom left no-repeat;}
.friend08{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/jason1.jpg) top left no-repeat;
display: block;} .friend08:hover{background: url(http://img.photobucket.com/albums/v179/li0id/jason1.jpg) bottom left no-repeat;}
.friend09{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/deana1.jpg) top left no-repeat;
display: block;} .friend09:hover{background: url(http://img.photobucket.com/albums/v179/li0id/deana1.jpg) bottom left no-repeat;}
.friend10{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/ox1.jpg) top left no-repeat;
display: block;} .friend10:hover{background: url(http://img.photobucket.com/albums/v179/li0id/ox1.jpg) bottom left no-repeat;}
.friend11{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/jacqui-1.jpg) top left no-repeat;
display: block;} .friend11:hover{background: url(http://img.photobucket.com/albums/v179/li0id/jacqui-1.jpg) bottom left no-repeat;}
.friend12{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/laura1.jpg) top left no-repeat;
display: block;} .friend12:hover{background: url(http://img.photobucket.com/albums/v179/li0id/laura1.jpg) bottom left no-repeat;}
.friend13{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/kelsea1.jpg) top left no-repeat;
display: block;} .friend13:hover{background: url(http://img.photobucket.com/albums/v179/li0id/kelsea1.jpg) bottom left no-repeat;}
.friend14{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/paden1.jpg) top left no-repeat;
display: block;} .friend14:hover{background: url(http://img.photobucket.com/albums/v179/li0id/paden1.jpg) bottom left no-repeat;}



p, li {
font-size: 1.2em;
color: 575757;
}

.title1, .title2 {
font-weight: bold;
text-transform: lowercase;
letter-spacing: -1px;
color: 575757;
}

.title1 {
font-size: 1.3em;

}

.title2 {
font-size: 1.2em;



}

.title2 a {
font-size: 1.1em;

}

.sidebar .title2 {
padding: 0 0 0 12px;
}



.sidebar {
float: right;
margin-top: 50px;
width: 200px;
}

.content {
float: left;
margin-top: 65px;
margin-left: 30px;
width: 500px;
padding: 0 0 0 28px;
}




.lastfm {
position:fixed; left:50%; top:140px; margin-left:-314px;
width: 200px; height:100px;
background-color:transparent; border:1px solid rgb(0,0,0); z-index:3; }
* html .lastfm { position:absolute; width:50px; height:70px; }

}



.breaker {
float: center;
clear: both;
margin-top: 120px;
margin-left: -400px
border-top: 2px solid;
border-color: ffffff;
background-image: url("http://img440.imageshack.us/img440/3802/gradient5gj.jpg");
background-repeat: repeat-x;
height: 200px;
}

.bottoms {
clean: both;
margin-left: 200;
float: center;
padding: 25px 0 0 0;
}


textarea {
color: 575757;
width: 425px;
height: 125px;
padding: 3px !important;
background-color: E7F1D3;
border: 3px solid;
border-color: ffc71c;
overflow: auto;
}



.li0id {
position:fixed; left:50%; top:52px; margin-left:-23px;
background-color:transparent; border:2px solid ffc71c; z-index:2; }
* html .li0id { position:absolute; width:450px; height: 519px; }


.daliah {
position:fixed; left:50%; top:270px; margin-left:-18px;
background-color:E7F1D3; border:2px solid ffc71c;
z-index:2; padding:0px 4px 0px 4px; text-align:left;
}
* html .daliah { position:absolute; width:440px; height:200px; }




.hate {
position:fixed; left:50%; top:56px; margin-left:-18px;
background-color:E7F1D3; border:2px solid ffc71c;
z-index:3; text-align:left; padding:0px 4px 0px 4px;
}
* html .hate { position:absolute; width:172px; height:211px; }


.love {
width:160px; height:12px;
position:fixed; left:50%; top:35px; margin-left:107px;
background:transparent; border:0px;
z-index:3; text-align:center; font-size:8pt; }
* html .love { position:absolute; width:370px; height:20px; }



.love2 {
width:160px; height:12px;
position:fixed; left:50%; top:253px; margin-left:110px;
background:transparent; border:0px;
z-index:3; text-align:center; font-size:8pt; }
* html .love2 { position:absolute; width:370px; height:20px; }


.block {
position:absolute;
left:50%;
top:25px;
width:250px;
z-index:1;
margin-left:-430px;
}




input {
background-color: E7F1D3;
color: 575757;
border: 1px solid;
border-color: ffc71c;
}

</style>




thanks in advanced everyone, ive been at this all moring

[jscheuer1]

ive been at this all moring

And it shows. Anyways, you may not like this but, you are way over thinking and/or designing this. Images will go from left to right or (depending upon how you look at it) from right to left naturally. As long as there is room in their containing element(s) for them to fit width-wise and their display style is not set to 'block' or margins and padding are not added that would make them too wide or something dumb like putting each in its own division or paragraph, or having br tags between them, etc., they will not wrap, ex:


<img src="im1.gif"><img src="im2.gif"><img src="im3.gif">