Jump to content

Div + width


Tiago Salgado
 Share

Recommended Posts

Tiago Salgado

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.  😄

Link to comment
Share on other 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

Link to comment
Share on other sites

Tiago Salgado

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...

Link to comment
Share on other 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.

Link to comment
Share on other 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"...

há 10 tipos de pessoas: as que sabem binário e as que não sabem... todas as nossas vidas não passam de release candidates... com o aperfeiçoamento, um dia chegaremos à versão final..

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.