Hey all! Ok, im trying to get 4 images on one line with a margin between. I want to make 2 rows. The first row displays properly, but when I put the 2nd row in, the last image never floats right. Heres a screenshot: Heres the HTML code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Home | www.darrenkeen.com</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="logo" ><a href="http://www.darrenkeen.com"><img src="images/logo.jpg" border="0" width="196" height="109" alt="Logo" /></a> </div> <div id="nav"><p align="center" ><strong><span>HOME</span> | <a href="portfolio.html">PORTFOLIO</a> | <a href="contact.html">CONTACT</a></strong></p> </div> <div id="mainimage"> <div id="firstline1"><img src="images/preview/communityp.jpg" alt="community" width="89" height="89" /></div> <div id="firstline2"><img src="images/preview/gamersp.jpg" alt="gamers" width="89" height="89" /></div> <div id="firstline3"><img src="images/preview/gamingp.jpg" alt="gaming" width="89" height="89" /></div> <div id="firstline4"><img src="images/preview/hi-techp.jpg" alt="hi-tech" width="89" height="89" /></div> <div id="secondline1"><img src="images/preview/personalp.jpg" alt="personal" width="89" height="89" /></div> <div id="secondline2"><img src="images/preview/qualityp.jpg" alt="quality" width="89" height="89" /></div> <div id="secondline3"><img src="images/preview/speakp.jpg" alt="speak" width="89" height="89" /></div> <div id="secondline4"><img src="images/preview/none.jpg" alt="none" width="89" height="89" /></div> </div> <div id="footer"><p align="center">COPYRIGHT DARREN KEEN 2009</p> </div> </div> </body> </html> Code (markup): CSS code @charset "utf-8"; /* CSS Document */ * { margin:0; padding:0; } a:link{ color:#979797; text-decoration: none; } a:visited{ color:#979797; text-decoration: none; } a:hover{ color:#FFFFFF; text-decoration: none; } body { background-image:url(images/bg.jpg); background-repeat:repeat-x; background-color:#00090d; font-family:"Arial", Helvetica, sans-serif; } #wrapper { margin:0 auto; width:481px; } #logo { width:196px; height:109px; margin:auto; margin-top:78px; } #nav { color:#979797; font-size: 9px; margin-top:30px; letter-spacing:10px; } #nav span{ color:#0097c8; } #main { margin-top:35px; } #main p{ color:#FFFFFF; font-size:10px; line-height:20px; } #main a:link{ color:#FFFFFF; } #mainimage { margin-top:35px; height:227px; width:481px; } #firstline1{ width:89px; float:left; } #firstline2{ margin-left:41px; width:89px; float:left; } #firstline3{ margin-left:41px; width:89px; float:left; } #firstline4{ width:89px; float:right; } #secondline1{ width:89px; float:left; margin-top:41px; } #secondline2{ margin-left:41px; width:89px; float:left; margin-top:41px; } #secondline3{ margin-left:41px; width:89px; float:left; margin-top:41px; } #secondline4{ width:89px; float:left; margin-top:40px; } #footer { font-size:9px; margin-top:35px; color:#979797; letter-spacing:10px; } #footer span{ color:#0097c8; } Code (markup): Please help Thanks
There is a difference in your firstline4 and secondline4 definitions: #firstline4{ width:89px; float:right; } #secondline4{ width:89px; float:left; margin-top:40px; } If you update the float for secondline4 to right then that should resolve the issue. Alternatively, adding: margin-left:41px; and then leaving float set to left should have the same effect.