Borda da div menu não vai até a buttom

[mestre fyoda]

A div menu ela não esta colocando a borda até lá em baixo

#content_container{ background:#EFF5FF url(../img/images/areaCliente/borda.png) repeat-y;border:5px solid #258;color:#666;margin:20px auto 0;padding:0;text-align:left;width: 950px;}
#menu { width: 219px; float: left; border-right:1px solid #CFE2FF; margin: 0px auto; padding: 15px; }
#menu ul{list-style:none;margin:0 0 10px;padding:0;padding-left: 25px;}
#menu ul li{line-height:30px;margin:0 auto;padding:0;}
#conteudo { float:right; width: 670px;text-align:left; margin: 0px auto; padding: 15px; background-color: #FFF;}
.clear{clear:both;}

       <div id="content_container">

          <div id="menu">
            <br />
            <p class="header">Navegação Rápida</p>
            <ul>
              <li><a href=""><img src="img/images/areaCliente/support.gif" alt="Suporte" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Suporte">Últimos Pedidos</a></li>
              <li><a href=""><img src="img/images/areaCliente/pedidoaberto.png" alt="Área do Cliente" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Área do Cliente">Pedidos em Aberto</a></li>
              <li><a href="" title="Anúncios"><img src="img/images/areaCliente/entrega.png" alt="Anúncios" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Anúncios">Pedidos Entregues</a></li>
              <li><a href="" title="Base de Conhecimento"><img src="img/images/areaCliente/pedido.png" alt="Base de Conhecimento" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Base de Conhecimento">Pedidos por Número</a></li>
              <li><a href="" title="Enviar Ticket"><img src="img/images/areaCliente/datapedido.png" alt="Enviar Ticket" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Tickets de Suporte">Data do Pedido</a></li>
              <li><a href="" title="Downloads"><img src="img/images/areaCliente/pedido.png" alt="Downloads" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Downloads">Todos os Pedidos</a></li>
              <li><a href="" title="Pedido"><img src="img/images/areaCliente/order.gif" alt="Pedido" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Pedido">Alterar E-Mail</a></li>
              <li><a href="" title="Anúncios"><img src="img/images/areaCliente/alterarsenha.png" alt="Anúncios" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Anúncios">Alterar Senha</a></li>
              <li><a href="" title="Base de Conhecimento"><img src="img/images/areaCliente/editarcadastro.png" alt="Base de Conhecimento" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Base de Conhecimento">Alterar dados Cadastrais</a></li>
              <li><a href="" title="Enviar Ticket"><img src="img/images/areaCliente/email.png" alt="Enviar Ticket" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Tickets de Suporte">E-Mail de Ofertas</a></li>
              <li><a href="" title="Downloads"><img src="img/images/areaCliente/boleto.png" alt="Downloads" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Downloads">2º via do Boleto</a></li>
              <li><a href="" title="Pedido"><img src="img/images/areaCliente/suporte.png" alt="Pedido" width="16" height="16" border="0" class="absmiddle" /></a> <a href="" title="Pedido">Suporte</a></li>
            </ul>
            <br /><br /><br />
          </div>

          <div id="conteudo">
            <h1>Área do Assinante</h1><br />
              <p>Bem-vindo <b><asp:Label ID="nomeCliente" runat="server"></asp:Label></b></p><br />
        <table width="100%" border="0" align="center" cellpadding="10" cellspacing="0">
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/32x32.png" border="0" alt="" /></a></div></td>
            <td width="50%"><strong><a href="">Últimos Pedidos</strong>
              </td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/pedidoaberto32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Pedidos em Aberto</a></strong><br />
              </td>
          </tr>
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/entrega32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Pedidos Entregues</a></strong><br />
              </td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/pedido32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Pedidos por Número</a></strong><br />
              </td>
          </tr>
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/datapedido32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Data do Pedido</a><br />
            </strong></td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/pedido32x32.png" border="0" alt="" /></a></div></td>
            <td width="50%"><strong><a href="">Todos os Pedidos</a></strong><br />
              </td>
          </tr>
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Alterar E-Mail</a></strong><br />
              </td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/alterarsenha32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Alterar Senha</a></strong><br />
              </td>
          </tr>
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/editarcadastro32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Alterar Dados Cadastrais</a></strong><br />
              </td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/email32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">E-Mail de Ofertas</a></strong><br />
              </td>
          </tr>
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/boleto32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">2º via do Boleto</a></strong><br />
              </td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/suporte32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Suporte</a></strong><br />
              </td>
          </tr>          
          
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/boleto32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">2º via do Boleto</a></strong><br />
              </td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/suporte32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Suporte</a></strong><br />
              </td>
          </tr>
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/boleto32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">2º via do Boleto</a></strong><br />
              </td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/suporte32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Suporte</a></strong><br />
              </td>
          </tr>
          <tr>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/boleto32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">2º via do Boleto</a></strong><br />
              </td>
            <td><div align="center"><a href=""><img src="img/images/areaCliente/suporte32x32.png" border="0" alt="" /></a></div></td>
            <td><strong><a href="">Suporte</a></strong><br />
              </td>
          </tr>

        </table>
        </div>

          <div class="clear"></div>
        </div>

[*FIT*]

Tem o link pra gente dar uma olhada melhor?

[mestre fyoda]

EDIT

Editado Maio 27, 2010 por mestre fyoda

[*FIT*]

Coloque um height de 560 ou 550px na div menu.

A borda não vai até embaixo, porque o a div acaba antes.

[mestre fyoda]

FIT, tem um problema, o layout vai ficar estranho se na div conteudo exceder height de 560 ou 550px .

Eu precisava que a borda foce até la em baixo, teria como ?

Na div menu, a div toda teria que ter a borda direita mas não tem !

Editado Maio 27, 2010 por mestre fyoda

[*FIT*]

Mas quem disse que a borda não está na div toda?

Está sim, o problema é que a div está acabando justamente ali aonde a borda para, a div não está indo até la embaixo.

Aumentei o height dela na firebug e ficou certinho, não desalinhou nada no layout. ;)

[mestre fyoda]

FIT axo que me expressei mal, existe a possibilidade da div acompanhar a altura da div conteudo ?

[*FIT*]

A div conteúdo tem um height de 670px, não seria mais fácil deixar a div menu com a mesma altura?

[mestre fyoda]

FIT você se confundiu, é width de 670px !

[*FIT*]

Realmente inverti...hehe

mas me responde uma coisa, o conteúdo da div conteudo é dinamico? ou seja por isso não tem tamanho fixo?

Se for, o que acha de colocar a borda do lado esquerdo da div conteudo em vez de deixar do lado direito da div menu?

Fiz aqui, e funcionou...

#content_container{ background:#EFF5FF url(../img/images/areaCliente/borda.png) repeat-y;border:5px solid #258;color:#666;margin:20px auto 0;padding:0;text-align:left;width: 950px;}
#menu { width: 219px; float: left; margin: 0px auto; padding: 15px; }
#menu ul{list-style:none;margin:0 0 10px;padding:0;padding-left: 25px;}
#menu ul li{line-height:30px;margin:0 auto;padding:0;}
#conteudo { float:right; width: 670px;text-align:left; margin: 0px auto; padding: 15px; background-color: #FFF; border-left:1px solid #CFE2FF;}
.clear{clear:both;}

[mestre fyoda]

Nossa FIT uma solução simples e eu nem pensei nisso.

Me desculpe pelo estorvo .

Obrigado.

[*FIT*]

Sim, as vezes a solução é bem mais simples do que imaginamos.

Da uma olhada nesse tópico...hehe

http://scriptbrasil.com.br/forum/index.php?showtopic=150305

[mestre fyoda]

Resolvido !

Editado Maio 27, 2010 por mestre fyoda

[mestre fyoda]

Então hoje encontrei um problema. Se a id conteudo tiver a altura menor que a id menu a borda não acompanha o menu !

http://rafaelfernandesdorazio.homedns.org:...reaCliente.aspx

Para que ocorra o bug da borda, clique no primeiro menu !

Editado Maio 28, 2010 por mestre fyoda

[*FIT*]

Então, mas isso vai ocorrer porque a altura da div conteúdo não é fixo.

Se quiser que a borda acompanhe sempre os dois, teria que deixar um tamanho fixo em ambas.

[mestre fyoda]

O problema é que se o clinte tiver varios pedidos ai a ideia vai por água baixo, você teria alguma outra sugestao ?

[*FIT*]

Bom, a idéia seria criar uma outra div entre elas, e em vez de borda, usar uma imagem como background usando repeat.