Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
beleza povo..
É o seguinte, sempre tive problemas em fazer isso, sempre que faço um site eu limito a largura do site e por ai eu consigo controlar as larguras das colunas, mas agora pintou um site onde o cliente quer a tela cheia, e ai me pegou, como eu faço para o meu site entender que a primeira coluna vai pegar 200px e a segunda vai pegar o resto da página???
Tipo o site do wikipédia: http://pt.wikipedia.org/wiki/CSS3
Se notarem ele tem o menu do tamanho fixo na esquerda e o conteúdo pega o restante da página.
Obs: já procurei no google e aqui.. mas oke eu sempre acho é quando o site tem uma largura especifica.
Obrigado desde já...
Já consegui resolver...
fiz da seguinte forma
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Documento sem título</title>
<style>
#divMenu {
width: 200px;
height: 300px;
float: left;
display: table;
}
#divConteudo {
width: auto;
height: 300px;
margin-left: 200px;
margin-top: 50px;
background: #FFF;
border-top: 1px solid #A7D7F9;
border-left: 1px solid #A7D7F9;
border-bottom: 1px solid #A7D7F9;
}
</style>
</head>
<body>
<div id="divMenu"></div>
<div id="divConteudo"></div>
</body>
</html>1. Defina a largura e a propriedade float de sua barra lateral no CSS:
#sidebar-left {
width: 200px;
float: left;
}2. Defina uma margem para a div com o conteúdo, criando um espaçamento do mesmo tamanho da barra lateral:
#content {
margin-left: 210px;
}Veja um exemplo: http://jsfiddle.net/brunobispo/KSy3t/
O jeito foi bom, não sabia desse modo de colocar width: auto,
Um outro jeito é atribuir o valor 100% a ele, isso serve para qualquer coisa que você queira pegar a tela inteira.
#Atributo {width: 100%}
Espero ter ajudado!
Abraço!
Use um
min-width: valorMinimo;
Para evitar deformações quando redimensionado.
Olha, tem duas formas de fazer isso.
A primeira (que é simples, mas não muito legal) é montar a estrutura principal em table, daí na TD da esquerda você coloca uma largura fixa e na da direita deixa em aberto, colocando width="100%" pra table. Daí dentro você volta ao tableless. Dessa forma você consegue fazer as coisas com um simples CSS.
Mas se você quiser fazer tudo em tabless, é preciso usar Javascript/jQuery para controlar a largura da DIV expansível.
Nesse link abaixo, o rapaz teve uma dúvida muito similar a sua, mas era verticalmente e não horizontalmente. Dá uma olhada lá que tem explicando ambas as formas.
http://forum.imasters.com.br/topic/477610-elemento-html-com-height-auto-ajustavel/