• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

Tiago Salgado

Div + width

7 mensagens neste tópico

Boas,

Precisava de uma dica aqui nesta situação.

Tenho 2 divs, e quero po-las lado a lado ( como se fosse uma tabela com 2 colunas ).

div.menu
{
float:left;
width: 200px;
height: auto;
background-color:Menu;
}

div.info
{
float:right;
width: 599px;
height: auto;
}

<div class="menu">
<div class="info"></div>

Se repararem, tenho na div.info a propriedade width: 599px e na div.info ta a 200px. Isto porque estas duas divs tao incluidas numa outra div com o width: 800px, e se puser 200/600 as divs ficam mal. Há possibilidade de resolver isto ou terei mesmo q ter assim como está ?

Depois, dentro da div.menu estarão outras divs (cada uma referenciada para a class div.menu_item) com o width: 100% . Neste caso acontece o que acontecia nas divs anteriores se usasse 200px e 600px.

Gostaria de saber qual a forma mais correcta para fazer isto que quero.

Resumo:

Ter 4 divs.

- div principal

- div menu + div info ( incluidas na div principal )

- div menu_item ( incluidas na div menu )

Desde ja obrigado.  :D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Falta-te meter ai div principal.

  Vê se te Ajuda:


  body{
margin:10px 15px;
font: 12px Arial, Helvetica, sans-serif;
background-color:#99CCFF;
}
#tudo {
width:700px;
/* background: url(faux-bg.gif) repeat-y 0 0; */
background-color:#C3C3C3;
}
#topo {	
height:100px;
background-color:#df7ddf;
background-image:url(../images/admin/topo.jpg);
background-repeat: no-repeat;
}
#principal {
width:550px;
/*background-color:#9cf;*/
float:right;
padding-top: 10px;
}
#navegacao {
width:150px;
height: auto;
background-color:#C3C3C3;
float:left;
clear: left;
padding-top: 10px;
padding-bottom: 10px;	
}
#principal * {
padding: 0 20px;
margin-top: 10px;
}
#navegacao * {
padding: 0 8px;
}
#rodape {	
clear:both;
height:20px;
background-color:#666666;
}

neste codigo tenho um Div top, Um Div navegaçao que e onde tenho o menu, um Div conteudo que é onde aparece a informaçao, e um div rodapé.

Tu so precisas do Div Todo (que e a pagina toda), e do Div navegaçao e do Div conteudo

Espero ter ajudado

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ja tive a testar esse código, mas acontece q poe a div "principal" por baixo da div "navegacao".

Só se não estou a usar correctamente isto...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

penso que isto deve dar:

#esquerda
{
  width: 199 px;
  float: left;
}

#direita
{
  margin-left: 201 px;
  width: 599 px;
}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

deve ter a ver com este pedaço de codigo.


#tudo {
width:700px;
/* background: url(faux-bg.gif) repeat-y 0 0; */
background-color:#C3C3C3;
}

Este todo e o site em sim, deves ter e que recalcular, os Div navegação e conteudo,.

  Imagina de 500px no Div principal que neste caso e o div tudo, para os div navegação e div conteudo ficarem alinhados, tens de meter tipo Div navegaçao = 150px, dos 500px vais tirar 150px logo ficas com 450px a faltar oucupar, como nao podes usar os 450px senao ele faz isso tens no div conteudo meter 350px por exemplo.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

não há nada como ter na div que tem os floats lá dentro colocar, mesmo antes de fechar a div, uma div sem conteudo cujo css é "clear:both"...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora