Hi, I am new to this CSS problem. Logo img is displaying at the right point in the website. but the name and address of company displayed a little far up than the logo. It should be displayed at the same place like Logo. please help. <img class="float_left" src="/images/priya.png" alt="PP Logo"> <div id="company_address" class="float_left">123 abc suite 100 Edina</div> <div id="company_name" class="float_left">ABC company </div> HTML: html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset {margin:0;padding:0;} img, fieldset {border:0;} img {max-width:100%;height:auto;} .ie8 img {width:auto;height:auto;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;} html {height:100%;} body{ min-height: 1000px; } .float_left{ float: left; } #company_address { color: #ffffff; font-size: 20px; position: absolute; bottom: 66px; left: 372px; top: 55px; } #company_name { color: #ffffff; position: absolute; bottom: 74px; left: 372px; font-size: 30px; font-style: italic; z-index: 1111; top: 25px; } Code (CSS):
Presentational image in the markup, DIV doing H1's job, presentational classes, absolute positioning of elements that should likely remain in flow, framework masquerading as a reset, min-height for **** knows what on elements that don't accept min-height properly, opposing side positioning that's unreliable in legacy UA's, **** only knows what your line-heights are doing since you don't declare them... Basically, what @Rokis said. Junk it and redo using semantic markup... probably should lose the pixel metric fonts since those are accessibility trash, but that would hinge on how you want it to interact with the image.