html - Text overlapping responsive image border -
i made page fixed header, footer , middle section large image adjusts size of window. if there enough room, trying have image description, couple of buttons , small image on right side of large image. if not enough room, wanted these items drop below large image @ ones. able achieve creating table containing items , placing after large image in code. have 200px min-width set table doesn’t skinny. problem happens when table drops below. text in overlaps border of large image , avoid it. simplest solution add "br" tag in front of description text, don’t way looks when table displayed on right, doesn’t work me. perhaps there better way together. way, border on large image made using margin , padding, not actual border. tried doing border , had same issue.
here jsfiddle of have far. please move side border make wider/skinnier see how page responds. help.
html
<!doctype html> <html lang="en"> <body> <div id="header">header</div> <div id="main"> <img src="http://s33.postimg.org/5dvnxclpr/tmto1.jpg" id="photo"> <table> <tr> <td> description text description text description text text description text description text text description text description text text description text description text text description text description text text description text description text text description text description text text description text description text text description text description text text description text description text text description text description text text description text description text text description text description text </td> <tr> <td> <ul> <li> <a href="">prev</a> </li> <li> <a href="">next</a> </li> <li> <a href="">zoom</a> </li> </ul> </td> <tr> <td> <img src="http://s33.postimg.org/8fdpz710v/tmto2.jpg" id="nextphoto"> </td> </table> </div> <div id="footer">footer</div> </body> </html> css
body { background: #f0ceb5; margin: 0px; padding: 0px; font-family: arial, sans-serif; font-size: 14px; color: #000000; } img { border: 0px; } #header { position: fixed; top: 0px; width: 100%; height: 60px; line-height: 60px; } #main { position: fixed; top: 60px; bottom: 30px; left: 20px; right: 20px; padding: 10px; overflow-y: auto; } #photo { max-height: 100%; max-width: 100%; width: auto; float: left; background: #d0a382; padding: 10px; margin: -10px; margin-right: 10px; } table { margin: 0px; padding: 0px; min-width: 200px; } ul { margin: 0; padding: 0; list-style: none; float: left; } ul li { display: block; position: relative; float: left; } ul li { display: block; position: relative; float: left; padding: 10px; white-space: nowrap; margin: 10px; margin-left: 0px; font-family: arial, sans-serif; font-size: 16px; color: #ffffff; background: #d0a382; } #nextphoto { margin-top: 10px; } #footer { position: fixed; bottom: 0px; width: 100%; height: 30px; line-height: 30px; } edit:
it seemed margin: -10px 10px 0px -10px; solution, looks still have bit of issue. didn’t notice until because browsing using firefox , that’s browser doesn’t seem have issue. checked chrome, ie, opera , have problem. happens when use large image fills of height between header , footer , table displayed right of it. i’ve used margin: -10px 10px 0px -10px; on large image. there space below large image that’s causing vertical scroll bar appear when it’s not needed yet. have set appear when necessary on #main div. in case it’s little space below large image makes appear prematurely. firefox somehow knows ignore space , doesn’t show scroll bar, other browsers , makes page not great without reason. please see jsfiddle , make sure widen window table moves right of large image. if can, please check way looks in firefox vs. other browsers , let me know if have same issue. there way rid of little space below large image? way know use -10px margin @ bottom, brings right original problem.
you negative margin bringing text , allowing following text overlap image's border.
change margin attribute this: margin: -10px 10px 0 -10px; (top, right, bottom, left)
