(Resolvido) <DIV> "Estourando" o layout - Help!

Portal do Químico · Agosto 6, 2010

Boa noite pessoal, estou com um problema no layout do meu site.

Resolvi inovar "meus trabalhos" e criar um layout sem usar tabelas. Até ae tudo bem.

O template ficou show, porem uma das divs (a de conteudo) ao receber uma grande quantidade de caracteres digitados, estoura o layout da página. Como assim? .... Ao invez da div principal crescer junto com a div conteudo, a DIV conteudo_central (a que me refiro como div_conteudo) cresce sozinha. Entenda melhor visualizando o Código:

Codigo da Página

<body>
<div id="corpo_do_site">
    <div id="arranha_ceu">
        <div id="busca">
    <!-- <input id="busca" maxlength="35" alt="Buscar" class="inputbox" type="text" size="35" value="Digite aqui..."  /> -->
        </div>
    </div>
    <div id="topo">
        <div id="img_topo"><?php echo $row_rs_logotipo['pag_conteudo']; ?></div>
    </div>
    <div id="menu_topo"><?php echo $row_rs_menu_topo['pag_conteudo']; ?>
    </div>
    <div id="conteudo_geral">
    <div id="menu_esquerdo">
             <div id="menu_principal"><div id="_principal"><b>Menu Principal</b></div></div>
             <div id="menu_links">
                    <?php echo $row_rs_menu_esquerdo_1['pag_conteudo']; ?>
             </div>
        <div id="menu_final"></div>
        <div id="separador"></div>
        <div id="menu_principal"><div id="_principal"><b>Gestão do Aluno</b></div></div>
        <div id="menu_links">
                    <?php echo $row_rs_menu_esquerdo_2['pag_conteudo']; ?>   
             </div>
        <div id="menu_final">
        </div>
    </div>
   <div id="conteudo_central"><!-- TemplateBeginEditable name="conteudo_central" -->Conteudo<!-- TemplateEndEditable --></div>
   </div></div>
<div id="rodape"><?php echo $row_rs_rodape_site['pag_conteudo']; ?> </div>
</body>
</html>

PS: Ignore o conteudo, esta tudo correto. Código CSS

/*configuração do topo*/

* {
    margin:0px;
    padding:0px;
    }
    
#arranha_ceu {
    margin:0px auto;
    width:100%;
    height:28px;
    background-image:url(../imagens/topo.jpg);
    }
    #busca {
        margin:0px auto;
        width:150px;
        height:18px;
        float:right;
    }
    
#topo {
    width:904px;
    height:200px;
    margin:0px auto;
    /*margin-top:5px;*/
}

#menu_topo {
    background-image:url(../imagens/topo.jpg);
    width:904px;
    height:25px;
    margin:0 auto;
}


#img_topo {
    width:900px;
    height:auto;
    }

/* Configuração do corpo*/

body {
    background-image:url(../imagens/page_bg.png)
    }

form {  
    margin: 0; 
    padding: 0;
}
img,table {    
    border: none;
}p {    
margin: 5px 0;
text-align: justify;
}
a {
    color: #577a0e;    
    outline: none;    
    text-decoration: none;
    font-family:"Times New Roman", Times, serif;
    font-weight: 600;
    font-size:12px;
    }
    /*a:link {
        font-weight: 400;
        }
        a:visited {
            font-weight: 400;
            color: #999;
            }
            a:hover {
                text-decoration: underline;
                font-weight: 400;
                }
                input  {
                    color: #ccc;
                    outline: none;
                    margin: 0;
                    }
                    input:focus {
                        outline: none;
                        }
                        button {
                            color: #fff;
                            font-size: 11px;
                            border: none;
                            background: #696969;
                            cursor: pointer;
                            } */
/* Configuração do Conteudo do site*/
#conteudo_geral {
    margin:0px auto;
    width:928px;
    height:500px;
    background: transparent url(../imagens/wrapper.png) repeat-y top center;
}

#conteudo_central{
    border:#DBDBDB 2px solid;
    width:645px;
    /*height:90%;*/
    padding:6px 0 0 7px;
    margin-top:5px;
    margin-right:20px;
    margin-left:5px;
    text-align:center;
    background-color:#FFF;
    float:right;
}

/*************************************************************************************************

Configurações no Menu esquerdo

*************************************************************************************************/

#menu_esquerdo{
    display:block;
    font-weight: 400;
    font-size: 11px;
    line-height: 21px;
    padding:0 0 0 7px;
    text-decoration: none;
    color: #577a0e;
    float:left;
    width:220px;
    height:auto;
    margin-left:16px;
    margin-top:5px;
    /*text-align:center;*/
}

#_principal{
    font-size:13px;
    padding-left:18px;
    padding-top:6px;
    color:#666

}

#menu_principal{
    float:left;
    width:220px;
    padding-left:0px;
    height:28px;
    background-image:url(../imagens/box_menu.png);
    
}
#menu_links{
    padding-left:20px;
    background: transparent url(../imagens/box_menu_bg.png) repeat-y top center;
}
#menu_final{
    float:left;
    width:220px;
    padding-left:0px;
    height:13px;
    background-image:url(../imagens/box_menu_f.png)
}
#separador{
    height:25px;
    }


/* Configuração do Rodapé*/
#rodape {
    width:928px;
    height:20px;
    margin:auto;
    padding: 0px 0px 0px 0px;
    text-align:center;
    font-size:10px;
    margin-bottom:10px;
    background-image:url(../imagens/pezao.png);
    }

Me ajudem a tirar esse problema?

Abraços, Paulo Ferreira

ESerra · Agosto 6, 2010

Movendo PHP » HTML.

*FIT* · Agosto 6, 2010

Já tentou deixar a altura da div como auto? assim quando a de dentro crescer...ela cresce também.

Portal do Químico · Agosto 7, 2010

Fala FIT*, já tinha tentado isso. Não dá certo, acredito eu que seja porque as DIV's internas estão em Float. Teria que arrumar outra alternativa, mas nada que apliquei até então deu certo.

Portal do Químico · Agosto 7, 2010

Problema solucionado:

Para quem tiver o mesmo problema, basta colocar a DIV master com os dados:

{display:table}

Morreu Maria ;)

Entrar

(Resolvido) <DIV> "Estourando" o layout - Help!

Pergunta

Portal do Químico

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

ESerra

Link para o comentário

Compartilhar em outros sites

FIT

Link para o comentário

Compartilhar em outros sites

Portal do Químico

Link para o comentário

Compartilhar em outros sites

Portal do Químico

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades