Setting %width of div cancels div's float property

Question

I experienced a problem with placing divs. The divs "menu" and "content" are meant to be next to each other. They were, until i tried to set their width using % instead of px. After applying that change the effect of 'float: left;' was cancelled. I tried changing the order of parameters in css file, but it didn't work. I want them to maintain the 20/80 ratio, while still being next to each other. Can i achieve that using this method, or am i missing some information, and these can't be used on the same div?

#menu {
  background-color: lightgray;
  width: 20%;
  min-height: 600px;
  padding: 10px;
  text-align: center;
  float: left;
}

#content {
  background-color: gray;
  width: 80%;
  min-height: 600px;
  padding: 10px;
  float: left;
}

<div id="menu">
  menu
</div>
<div id="content">
  content
</div>

Answer 1

Seems like your padding is breaking the line because you are filling the 100% of the space. See https://jsfiddle.net/6dfs27u8/1/

#menu{
  float: left;
  background-color: lightgray;
  width: 20%;
  text-align: center;
  height: 600px;
}
#content
{
  float: right;
  background-color: gray;
  width: 80%;
  height: 600px;
}