I am using this CSS/HTML combo to emulate a two column layout:HTML\[code\]<!DOCTYPE html><html><head><meta charset=utf-8 /><title>JS Bin</title></head><body> <div class="two-cols"> <div class="left-col"> <img src="http://stott.customer.netspace.net.au/images/aurora2.jpg" alt="Image"/> </div> <div class="right-col"> Text </div></div></body></html>\[/code\]CSS\[code\].two-cols { border: 1px solid black; display: table; width: 100%;}.left-col, .right-col { display: table-cell; width: 50%;}img { width: 300px; height: 200px; padding: 0; margin: 0;}\[/code\]JSBin here.But there's an unwanted padding at the bottom of my image:
Any ideas why am I getting that and how can I get rid of that?