3

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 inserir a descrição da imagem aqui

Link do exemplo editável jsfiddle

Link do exemplo fora do iframe

inserir a descrição da imagem aqui

Link do exemplo editável jsfiddle

Link do exemplo fora do iframe

Gostaria de uma solução sem ter que usar width em porcentagem como nesta dashboard.

4
  • Cara, já tentou usar o bootstrap ? Com ele é muito fácil do que você fazer diretamente na mão... Nele já vem tudo de forma fácil de se usar. 21/05/2014 às 23:49
  • Cara talvez eu não tenha procurado direito rsrs mas pesquisei e não encontrei essa solução no bootstrap, se você tiver algum exemplo será bem vindo. 21/05/2014 às 23:51
  • Eu acho, que essa parte do tutorial será muito bem vinda pra você: nesse link. Como ele trabalha com grid, dá pra você fazer exatamente o que quer ! Isso que está nas imagens né. Aqui no DevMedia tem outro tutorial de como usar o bootstrap 21/05/2014 às 23:55
  • 1
    Essa é uma pergunta totalmente coerente com seu contexto e uma duvida aceitável e totalmente bem explicada eu não entendo porque os downvote e ainda por cima ninguém deixa comentário isso pra mim é falta de caráter!!!!! 22/05/2014 às 15:03

1 Resposta 1

6

Recentemente eu respondi uma pergunta onde a solução, em grande parte, pode ser aplicada aqui também.

Você pode resolver este problema da seguinte forma:

.menu{ /* estilo atribuído ao elemento que contém o menu */
    position:absolute;
    left:0;
    top:0;
    width:200px;    
}
body{
    padding-left:200px /*padding do tamanho do width do menu*/
}

Segue um exemplo prático.

2
  • Lembrei daquela mesma pergunta ao ler essa questão! 22/05/2014 às 15:02
  • @Kazzkiq muito obrigado parece que só você realmente leu minha pergunta e entendeu! sua solução funciona muito bem pra mim! 22/05/2014 às 15:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .