Removing space after div in HTML

Question

This question seems pretty simple, but I have problems 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 is still a space after the div, because the new line between each tag is considered a space. HTML is disgusting, making </div><div... what can I do to get rid of this space?

I tried various google actions like "html space after div", etc., but I just get a bunch of newbie questions asking about CSS sizes and more. Excuse me!

EDIT: Currently CSS is as follows:

 .col { background:lime; /* merely for testing*/ display:inline-block; } .col20 { width:20%; } .col80 { width:50%; } 

Answer 1

There can be no 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

Answer 2

I would suggest using float if you are having space problems:

CSS

 .col20{ width:20%; background-color:#F00; } .col80{ width:80%; background-color:#FF0; } .col{ float:left; overflow:hidden; } .clear{ clear:both; height:1px; margin-bottom:-1px; } 

Here is the violin