CarlosAdriano 0 Denunciar post Postado Março 29, 2015 Olá pessoal. Eu preciso fazer um esquema com três colunas onde a do meio se ajuste de acordo com o tamanho da tela. Já tentei usando float:left na primeira e na do meio, mas a do meio cai pra baixo. Então fiz do jeito que está abaixo, só que agora quando eu coloco uma imagem para width:100% ela cai pra baixo da barra da direita puxando o texto junto. Obrigado. <div id="bloco0"> <div id="barraesq"></div> <div id="bloco1"> <div id="barradir"></div> <div id="conteudo"> <h1>Titulo</h1> <span> Texto <img src="1.png"/> Texto </span> </div> </div> </div> #bloco0{ display: block; overflow: auto; } #barraesq{ width: 160px; height: 600px; background-color: lightgrey; float:left; clear: left; z-index: 1; } #bloco1{ margin-left: 180px; } #conteudo{ min-width: 300px; float: left; } #conteudo img{ width: auto; height: auto; margin: 0px; } #barradir{ float: left; clear: right; margin: 0px 0px 0px 20px; width: 300px; height: 600px; background-color: lightgrey; } Compartilhar este post Link para o post Compartilhar em outros sites
L. Henrique 179 Denunciar post Postado Março 30, 2015 Ao invés de adicionar divs com propriedade de barra, use o container do Bootstrap que seu trabalho ficará bem mais fácil. No caso, você faria o seguinte: <div class="container"> <div class="column esquerda> Conteúdo </div> <div class="column central> Conteúdo </div> <div class="column direita> Conteúdo </div> </div> As propriedades Container e Column já estão inclusas em qualquer arquivo Bootstrap.css que você linkar no HTML.Teste essa funcionalidade e comente o resultado. Compartilhar este post Link para o post Compartilhar em outros sites
Marco Bruno 19 Denunciar post Postado Março 31, 2015 Boa tarde, Carlos e Hantaroo. Realmente o que o Hantaroo comentou vai funcionar. Pessoalmente não concordo em utilizar um framework apenas para alinhar os elmentos na tela. Segue abaixo um exemplo de como pode ficar seu código: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Attribute selector</title> <link rel="stylesheet" href="css/main.css"> </head> <body> <div id="bloco0"> <div id="barraesq"></div> <div id="bloco1"> <div id="conteudo"> <h1>Titulo</h1> <p>Texto</p> <img src="1.png"/> <p>Texto</p> </div><!-- #conteudo --> </div><!-- #bloco1 --> <div id="barradir"></div> </div><!-- #bloco0 --> </body> </html> CSS #barraesq { float: left; background-color: red; width: 33.333%; height: 500px; } #barradir { float: right; background-color: blue; width: 33.333%; height: 500px; } #bloco1 { float: left; width: 33.333%; } #conteudo p:first-of-type { float: left; background-color: yellow; width: 33.333%; height: 200px; } #conteudo img { float: left; width: 33.333%; } #conteudo p:last-of-type { float: right; background-color: green; width: 33.333%; height: 200px; } Sobre a sua dúvida tem dois pontos bem importantes: valores relativos(%, em, rem, vh e vw) e posicionameno dos elementos na tela(display, float e position). Esses dois pontos é importante você conhecer muito bem para não ter grandes problemas como o desenvolvimetno Frontend. Qualquer dúvida só falar. []'s Marco Bruno. Compartilhar este post Link para o post Compartilhar em outros sites
CarlosAdriano 0 Denunciar post Postado Abril 2, 2015 A solução do bootstrap não deu muito certo. Acabou mudando outras coisas na página. Quanto a solução do Marco Bruno, o problema é que ai todas as colunas mudam de tamanho. Eu queria que só a do meio mudasse de tamanho e as outras ficassem fixas. Por fim achei uma solução: adicionei o estilo #conteudo{ margin: 0px 270px 0px 0px; } e agora funciona. Obrigado pelo empenho, Hantaroo e Marco Bruno. Compartilhar este post Link para o post Compartilhar em outros sites
