Hi, I am trying to place two div boxes inline horizontally on my page but the right box always seems to be a couple of pixels lower than the left one! I cannot see anything in the code that causes this, any ideas? Below is a link to the page on my site and the page code. Many thanks in advance; Site: http://smithscycles.co.uk (I can't do live links ) <html> <DIV> <DIV STYLE="position:absolute; top:248px; left:48px; width:848px; height:283px"> <style> #Box1 { position:absolute; top:10px; left:0px; width:400px; border-width: 2px; border-style: solid; border-color: #691c1c; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } #Box2 { position:absolute; top:0px; left:420px; border-width: 2px; border-style: solid; border-color: #691c1c; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } .divtitle {font-weight: bold; font-family: calibri; font-size: 16pt; color:#FFFFFF;} .divsub {font-weight: bold; font-family: calibri; font-size: 12pt; color: #FFFFFF;} .divtext {font-weight: normal; font-family: calibri; font-size: 12pt; color: #FFFFFF;} </style> <div id="Box1"> <div align="justify"> <div class="divtitle" style="width: 400px;">Come and visit Us! </div> <div class="divsub">Directions </DIV> <div class="divtext" >Smiths Cycles is located on New Road, Opposite the access road for Kidderminster Collage. <br/> <br/> <B>From Worcester</B> - At the island at the end of the A442/Worcester Road, take the 2nd exit onto New Road (signs to town centre). Continue along this road for 200m and go straight over at the traffic lights. Almost immediately after, take the 2nd exit on the mini round-a-bout and Smiths Cycles is located 150 on the right. <br/> <br/> <B>From Birmingham</B> - At the island where the A456/Birmingham Road meets the Kidderminster Ring-Road, take the 2nd exit onto Coventry Street followed by an almost immediate left into Bromsgrove Street. Follow this road round for 500m, going straight accross at the mini round-a-bount and Smiths Cycles is located on the left. </> </div> <div id="Box2"> <div align="justify"> <div class="divtitle" style="width: 430px;">Map</div> <div class="divsub"></div> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?hl=en&ie=UTF8&q=smiths+cycles+kidderminster&fb=1&split=1&gl=uk&cid=0,0,8760992302643490865&ei=np2CSo75CIusjAfa9bmFCg&source=embed&ll=52.388199,-2.247992&spn=0.009167,0.018239&z=15&iwloc=A&output=embed"></iframe><br /><small><a href="http://maps.google.co.uk/maps?hl=en&ie=UTF8&q=smiths+cycles+kidderminster&fb=1&split=1&gl=uk&cid=0,0,8760992302643490865&ei=np2CSo75CIusjAfa9bmFCg&source=embed&ll=52.388199,-2.247992&spn=0.009167,0.018239&z=15&iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small> <div class="divtext" ></div> </DIV> </html> HTML:
absolute position will generate element relative to its containing block, where as float will keep you element into the layout. set float left for both divs or left for one and right for other and remember to keep clear the floats by using css property clear:both after the divs.. thanks Harpreet Khera