Hi, I am trying to position images, 4 to a row in 3 rows. I have defined the following divs: container {width:800px; height:450px;position:relative} firstrow {width:600px; height:130px;position:relative;top:0px} secondrow {width:600px; height:130px;position:relative;top:140px} thridrow {width:600px; height:130px;position:relative;top:280px} However, when I display the images, they are all displayed one after the other, with a gap between what were supposed to be rows. Can anybody tell me what might be wrong? I tried display:inline as well as display:block, but with no success. Any help will be greatly appreciated!
Try the following: 1-) Change the position: relative to position: absolute for: #firstrow, #secondrow and #thridrow 2-) Comment out in the markup the images, put background colors in each DIV in order to see the DIVs position (remove the colors when all is OK) 3-) Set #container img {float:left;} Remember: total sum for images width plus paddings images <= 600px. Hope this helps