Estou fazendo um layout que possuirá duas colunas, a primeira na esquerda irá compor um menu a segundo irá ocupar todo o espaço restante na tela do lado direito e nela ira ficar o conteúdo.
Ao desenvolver o css dessas colunas me deparei com o seguinte problema a primeira coluna(.sidebar) é float left a segunda(.maincontent) não, pois o width terá que ser responsivo entretanto ao colocar conteudo dentro da .maincontent
a quebra de linha dos conteúdos é correspondente ao tamanho da .sidebar
por esse motivo a orientação do conteúdo na .maincontent
ficava errada, a quebra de linha ficava muito grande e desproporcional, pra tentar resolver este problema defini a .maincontent
como float left e pronto o problema aparentemente foi resolvido mas de repente surgiu outro, o width da .maincontent ficou proporcional ao conteudo ao envés de ocupar o espaço restante da tela, e eu não estou conseguindo resolver este problema deixar a quebra de linha da .maincontent certa e independente e o width responsivo.
para melhor entendimento vou anexar os Screenshots e os exemplos no jsfiddle.net
Gostaria de uma solução sem ter que usar width em porcentagem como nesta dashboard.