Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Largura automática da div


+.jr_Designer.+

Pergunta

Boa noite moçada!

Estou desenvolvendo um layout de um e-Commerce e preciso que a minha div que irá exibir os produtos tenha a largura de 100% par aproveitar o espaço da janela, e também uma largura mínima definida pra avitar a bagunça caso a janela seja redimencionada e fique muito pequena.

O que ocorre é: quando eu redimenciono a janela do navegador a div desce e fica em baixo da div de navegação (departamentos e categorias da loja) que fica do lado esquerdo, só que eu não quero que isso aconteça!

Um exemplo é o site da Americanas. Preciso que o meu funcione da mesma forma, ou seja, quando ao redimencionar a janela e a div que exibe os produtos cehegar à largura mínima a janela simplesmente cubra a div, e não a empurre para baixo. Façam um teste, acessem o site e redimencionem a janela pra ver como a div se comporta! O meu layout é bem parecido tem praticamente a mesma estrutura.

Se alguém puder me ajudar a resolver isso, eu fico muito agradecido.

Estou postando os códigos a baixo (no css tem alguns que não estão sendo utilizados no html pois fiz uma adaptação pra mandar pra vocês)

default.css

body{
    margin:0px;
    padding:0px;
}

*{
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
}

#tudo{
    position:absolute;
    width:100%;
    height:auto;
}

#topo{
    width:100%;
    height:146px;
    min-width:1000px;
    background:#CCC;
}

#login_topo{
    position:relative;
    width:804px;
    height:43px;
    float:right;
    margin:0px 0px 0px 0px;
    background:url(../imagens/bg_topo_login.png) no-repeat;
}

#logo{
    position:relative;
    width:240px;
    height:66px;
    background:url(../imagens/logo.png) no-repeat;
    cursor:pointer;
    margin:0px 0px 0px 10px;
    top:15px;
}

#busca_topo{
    width:595px;
    height:23px;
    background:#099;
    clear:both;
    margin:50px 0px 0px 180px;
}

.carrinho{
    width:165px;
    height:46px;
    margin:0px 0px 0px 30px;
    background:#099;
    float:left;
}

#topo_navegacao{
    width:174px;
    height:41px;
    background:url(../imagens/topo_navegacao.png) no-repeat;
    margin:-55px 0px 0px 0px;
}

.titulo_navegacao{
    position:relative;
    width:163px;
    height:32px;
    top:3px;
    left:3px;
    background:url(../imagens/bg_titulo_navegacao.png)
}

#navegacao{
    float:left;
    width:174px;
    height:auto;
    min-height:500px;
    margin:-18px 0px 0px 0px;
    background:#999;
}

#conteudo{
    float:left;
    width:auto;
    height:auto;
    min-width:800px;
    min-height:250px;
    margin-top:5px;
    background:#FFF;
}

#container_banner_full{
    position:relative;
    width:600PX;
    height:220px;
    min-width:600px;
    border-top:1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    margin:0px 0px 0px 5px;
    background:#CCC;
}

.container_titulo_vitrine{
    clear:both;
    width:600px;
    height:24px;
    min-width:675px;
    background:#CCC;
    margin: 10px 0px 0px 5px;
}

.container_vitrine{
    float:left;
    width:auto;
    height:auto;
    min-height:400px;
    min-width:640px;
    background:#FFF;
}

.canto_esquerdo_vitrine{
    width:16px;
    height:24px;
    background: url(../imagens/canto_esq_vitrine.jpg) no-repeat;
    margin:15px 0px 0px 5px;
    float:left;
}

.canto_direito_vitrine{
    width:16px;
    height:24px;
    background:url(../imagens/canto_dir_vitrine.jpg) no-repeat;
    margin:15px 0px 0px 0px;
    float:left;
}

.centro_vitrine{
    position:relative;
    width:auto;
    height:24px;
    min-width:643px;
    background:url(../imagens/centro_vitrine.jpg) repeat-x;
    margin:15px 0px 0px 0px;
    float:left;
    color:#FFF;
    font-size:13px;
}

.vitrine{
    float:left;
    width:auto;
    height:auto;
    min-height:400px;
    min-width:675px;
    margin-left:5px;
    border-top:2px solid #d6d6d6;
    border-right:1px solid #d6d6d6;
    border-bottom:2px solid #d6d6d6;
    border-left:1px solid #d6d6d6;
    background:#FFF;
}

#auxiliar_direita{
    width:130px;
    height:auto;
    min-height:130px;
    margin:0px 5px 0px 5px;
    border:1px solid #d6d6d6;
    float:left;
}

#rodape{
    clear:both;
    width:100%;
    height:205px;
    background:#CCC;
}
default.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--=============INCLUDES==============-->
<link href="css/default.css" rel="stylesheet" type="text/css" />

<title>Untitled Document</title>
</head>

<body>

<div id="tudo">
    
    <div id="topo">
        
        TOPO
        
    </div><!--===topo===-->
    
        
        <!--====NAVEGAÇAO ESQUERDA DE DEPARTAMENTOS====-->
        <div id="navegacao">
        DEPARAMENTOS E CATEGORIAS DA LOJA    
        </div><!--===navegacao===-->
        
        
        <!--===DIV CONTEÚDO PRA PREENCER O CONTEÚDO CENTRAL [BANNER - VITRINE...]===-->
            <div id="conteudo">
        
            <!--=====BANNER FULL=====-->
            <div id="container_banner_full">
            BANNER PRINCIPAL<br />
            PRECISO QUE ESTA DIVE TENHA A LARGURA DEFINIDA COMO 100% E TAMBÉM UMA LARGURA MÍNIMA
            </div><!--===container_banner_full===-->
            
            
            
            <!--=====VITRINE=====-->
            <div class="container_titulo_vitrine">
                  PRODUTOS EM OFERTA<br />
                ESTA DIVE DEVERÁ TER LARGURA DEFINIDA COMO 100% E TAMBÉM UMA LARGURA MÍNIMA
            </div>
            
            <!--=====EXIBIÇÃO DOS PRODUTOS=====-->
            <div class="vitrine">
            
                   <br />EXIBIÇÃO DOS PRODUTOS<br />
                PRECISO QUE ESTA DIVE TENHA A LARGURA DEFINIDA COMO 100% E TAMBÉM UMA LARGURA MÍNIMA       
            
            </div><!--===vitrine===-->
            
            
            <!--=====CONTEÚDO AUXILIAR DIREITO=====-->
            <div id="auxiliar_direita">
            CONTEÚDO AUXILIAR DA DIREITA [PUBLICIDADES E PROMÇÕES]
            </div><!--===auxiliar_direita===-->
        
        </div><!--===conteudo===-->
        

    
    <!--===============RODAPE===============-->
    <div id="rodape">
    Rodape
    </div><!--===rodape===-->
    
</div><!--===tudo===-->

</body>
</html>

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0

possivelmente, a medida q você vai diminuindo a janela, chega uma hora q a soma dos min-widths das divs q estao lado a lado dentro do #conteudo (considerando tb as margins e etc) fica maior q o min-width do proprio #conteudo (ou seja o conteudo da div #conteudo fica maior do q ela mesma na horizontal), fazendo com q o conteudo seja quebrado.

de uma checada nisso.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,2k
    • Posts
      651,9k
×
×
  • Criar Novo...