Float:left and display:inline confusion

[departedmind]

Hi guyz,

 

I am having a problem displaying images horizontally (well dont have the code now) so giving example

 

main div's width is 1000px and is centered and left navigation is 200px wide and is floated left and i used display inline also and on remaining 800px i kept thumbnails images whose size varies and I kept those thumbnails in UL and LI

 

so it is like this (rough one)

 

#maindiv { width:1000px; margin:0 auto;}
#leftdiv { width: 200px; float:left; display:inline; }

#thumbDiv { width:800px;}
#thumbDiv ul li { float:left; display: inline;}

 

I want to display the thumbnails side by side, i tried keeping float and display in div, ul and li but it does not work 2nd thumbnail always comes down of the first one

 

can anyone guide me

 

thanks....

 

[SuperBlue]

If you placed the images inside li elements, then you need to float: left; the li elements, whitout applying display: inline; to the li elements.

 

You can then use margin-left to create a gap between each image. I.e.

 

li {
float: left;
margin-left: 1em;
}