posicionar duas divs

[amvm]

Boa tarde,

estou com duvida no posicionamento de duas divs, tal como mostra a imagem:

Problema é que pretendo que a altura da div conteudo (lado direito) se adapte conforme o conteudo dos menus. Ja a div da esquerda pretendo que tenha uma x altura predefinida.

codigo css

#main{background:lightgrey;
    margin:2% auto;
    width:65%;
    height:auto;
    border-right:1px solid rgb(54,54,54);
    border-top:1px solid rgb(54,54,54);
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
}

#conteudo{
 width:74.7%;
 height:auto;
 margin:0% 0%;
 border-right:1px solid rgb(54,54,54);
 border-left:1px solid rgb(54,54,54);
 border-bottom: 1px solid rgb(54,54,54);
 -moz-border-radius:20px;
 -webkit-border-radius:20px;
 border-radius:20px;
 background: white;
}
#menuLateral {
 width: 25%;
 height: auto;
 margin-right: -0.1%;
 margin-top:-36%;
 border-left:1px solid rgb(54,54,54);
 border-right:1px solid rgb(54,54,54);
 border-bottom:1px solid rgb(54,54,54);
 -moz-border-radius:20px;
 -webkit-border-radius:20px;
 border-radius:20px;

 background: white;
}

codigo html

<div id="main">
       <div id="conteudo" >

            <div id="menuLateral">

            </div>

        </div>
    </div>

cumps

[yoda]

Este link dá-te a informação que precisas para fazer a altura de uma div ajustar-se ao conteúdo : http://www.webtoolkit.info/css-clearfix.html

[amvm]

olá,

A minha div já se ajusta ao conteudo... problema é meter uma ao lado da outra, sendo que a da esqurrda se adapta ao conteudo (tal como quero) e a da direita nao (tal como quero)... sempre que o tamanho do conteudo varia, faz com que a posição da div da direita mude tbm... e queria que se mantivesse intacta...

cumps

[yoda]

Para isso vais ter de rever o teu CSS, tens instruções que podem estar a causar isso.

[alfujayrah]

Boa tarde, numa análise rápida ao teu código, sem testar, tenta colocar em ambas as div's (css), float:left;

Fico à espera de comentários. 😉

[HappyHippyHippo]

<div id="main">
 <div id="menuLateral"></div>
 <div id="conteudo" ></div>
 <div class="clear"></div>
</div>

.clear { clear: both; }
#main { width: 960px; margin: 0 auto; }
#menuLateral { width: 200px; float: right; }
#conteudo { height: 600px; }

[amvm]

obrigada 🙂

ja resolvi o problema.

cumps

[Jessica-riberio]

Pra complementar, tem artigo interessante que ensina a fazer um layout de duas colunas com css, pode ser útil para quem tiver a mesma dúvida: http://www.linhadecodigo.com.br/artigo/3570/como-criar-um-layout-de-duas-colunas-com-html-e-css.aspx

[cheires]

Para posicionamento de DIVs deixo aqui também um link que pode ajudar alguém.

Tem vários exemplos de tipode posicionamento e a forma de os conseguir.

http://www.barelyfitz.com/screencast/html-training/css/positioning/