Removing the space after a div in HTML

Question

This question seems pretty simple, but I'm having some troubles with it.

If I have two divs, given these styles:

<div class="col col20">
    Content left
</div>
<div class="col col80">
    Content right
</div>

It will create two divs (and in my stylesheet, one has width:20% and the other width:80%. However, there's still a space after the div, because the newline between each tag counts as a space. Without making my HTML hideous by doing </div><div..., what can I do to get rid of this space?

I've tried Googling various things like 'html space after div' and such, but I just get a bunch of newbie questions asking about CSS margins and whatnot. Sorry!

EDIT: Currently the CSS is as follows:

.col {
    background:lime; /* merely for testing*/
    display:inline-block;
}

.col20 {
    width:20%;
}

.col80 {
    width:50%;
}

Answer 1

There can't be any space. Check this:

HTML:

<div class="col col20">
    Content left
</div>
<div class="col col80">
    Content right
</div>

CSS:

.col {
  float: left;
}

.col20 {
  width: 20%;
  background: #ddd;
}

.col80 {
  width: 80%;
  background: #fdd;
}

http://codepen.io/Chovanec/pen/aktzr