How to close gap between image and text? - css

Question

I dont understand why I have a large gap between the second picture and the text to its right. I've attached a fiddle for the code. How do I close this gap?
http://jsfiddle.net/7Qchr/
.main {
-webkit-column-gap: 1em;
-webkit-column-rule: 2px;
-webkit-columns: 2;
}
#image {
max-width: 100%;
}
<div class="main">
<p id="text_l">
“ The best selection of cheese I've ever seen! Cannot wait for our next order!”
<p>
<img src="img/cheese1.jpg" alt="Picture of cheese" id="image">
</div>
<div class="main">
<img src="img/cheese2.jpg" alt="Picture of cheese" id="image">
<p id="text_r">
“ Wow,amazing cheese selection and fast delivery! I highly recommed you try!”
<p>
</div>

Answer 1

You'll have to rewrite your code a bit... Try something like this:
HTML
<div class="main">
<div>
<p id="text_l">blah</p>
</div>
<div>
<img src="cheese1.jpg" class="image">
</div>
</div>
<div class="main">
<div>
<img src="cheese2.jpg" class="image odd">
</div>
<div>
<p id="text_r">blah</p>
</div>
</div>
CSS
.main div{
width: 48%;
display: inline-block;
vertical-align: top;
}
.image {
max-width: 100%;
padding: 0 10px;
}
.image.odd {float: right;}
http://jsfiddle.net/7Qchr/6/

Answer 2

Updated Demo
The following CSS was added (none of the existing HTML or CSS was changed).
.main + .main {
text-align: right;
}
p {
text-align: left;
}