CSS Bar chart overflows, two rows instead of one single row

Question

Putting a simple barchart together however It is overflowing on certain values, the goal was to make it responsive so I am using % instead of fixed values.

If 100% for container width it works, however I need to have three of these side by side so container is 33%

div.label {
  background:blue;
  width:20%;
}

div.bar{
    width:80%;
}
div.bar_value{
    background:green;
    width:77%;
}

.row_container{
    background:black;
    width:33%;
}

.row_container div {
    display: inline-block;
}

Here is a snippet of the issues that I am having http://jsfiddle.net/7h64p0h6/1/

should it look like this? http://jsfiddle.net/sebastianbrosch/7h64p0h6/2/ — Sebastian Brosch, Oct 05 '15 at 16:16
Possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Stickers, Oct 05 '15 at 16:31

score 2 · Answer 1 · answered Oct 05 '15 at 16:17

You need to avoid space between divs problem with display inline-block elements.

.row_container{
    background:black;
    width:50%;
    font-size:0;
}

.row_container div {
    display: inline-block;
    font-size:16px;
    vertical-align: top;
}

See it working: http://jsfiddle.net/7h64p0h6/3/

CSS Bar chart overflows, two rows instead of one single row

1 Answers1