UL dentro de DIV - acompanhar a altura

[ZUCOLLI 1]

Boa tarde a todos...

 

Estou com uma dúvida de como fazer o seguinte:

 

Tenho vários UL... dentro de uma DIV.

Imagine que quando tenho espaço para 4 ULs na mesma linha e quando vou colocar a 5a ela vá para a linha de baixo... Até aqui normal.

O que acontece é que a DIV que engloba as ULs têm uma cor específica e ela não cresce junto com as ULs deixando apenas um pedaço com a cor e o resto em branco.

 

Existe alguma propriedade que possa me ajudar?

 

Obrigado.

 

ZUCOLLI

[Giovani 104]

@ZUCOLLI seus ul's devem estar com float, certo? Acho que esse link ajuda ;)

[ZUCOLLI 1]

Obrigado a todos, com as dicas ficou bem fácil.

 

Coloquei o clear: both e os ULs ficarão no lugar certo.

Coloquei display: inline-block e o background acompanhou o tamanho total das ULs.

 

 

Só que agora estou com outra dúvida, como faço para a linha ficar da altura da maior UL? ou seja tenho vários LI dentro de cada UL e as vezes mostro todos as vezes não, depende se tem informação no banco de dados... aí a UL que fica em baixo desloca... saca?

 

 

Valeu mesmo.

 

ZUCOLLI

[Giovani 104]

Ai você vai modificar o css, veja se funciona:

 

ul { display: inline-block;
*display: inline;
...
width: largurapx;
zoom: 1; }

[ZUCOLLI 1]

Não funcionou!

 

Eu não defini a altura da UL por isso cada uma fica de um tamanho e a idéia é deixar a linha da altura da maior.

 

 

ZUCOLLI

[Giovani 104]

O código que eu passei é pra isso, pra não "encavalar".

Você retirou o float?

 

Poste um link, vai fica mais fácil ;)

[André do Vale 76]

Eu me perdi um pouco nas dúvidas. Um exemplo de como você está fazendo fica melhor.

 

Ah, o que pode ajudar também é aplicar um "clear:left" (ou right, dependendo do seu float nas UL) na primeira UL que cai pra baixo. Ex.: se você possui muitas UL, e a cada 4 a próxima cai, você pode alcançá-la com ":nth-child(4n + 1)" de seletor. :thumbsup:

[ZUCOLLI 1]

Não tenho como saber após quantas a proxima vai cair...

 

A DIV é alterada conforme o usuário aumenta/diminui a janela.

 

Então as vezes vai ter 3 ou 4 ou 5...

 

ZUCOLLI

[André do Vale 76]

Se a largura das UL for fixa, aplique a propriedade com a largura de media queries então. Você alcança a média das resoluções necessárias para fazer a quebra que citei.

[ZUCOLLI 1]

A largura é fixa 160px

 

Só que não tenho este conhecimento ainda.

 

Vou estudar um pouco e volto com a solução.

 

 

Obrigado.

 

ZUCOLLI

[André do Vale 76]

Tenta algo do tipo:

 

 

@media only screen and (min-width: 1024px)  {
.suaUL:nth-child(4n + 1) {
clear: left;
}
}
@media only screen and (min-width: 864px) and (max-width: 1023px) {
.suaUL:nth-child(3n + 1) {
clear:left;
}
}

@media only screen and (min-width: 704px) and (max-width: 863px) {
.suaUL:nth-child(2n + 1) {
clear:left;
}
}

[ZUCOLLI 1]

André,

 

É isso que eu quero, porém como te disse não sei quantos terei na linha...

 

Apliquei isto e com 10 na linha ficou OK, porém quando o usuário dimensiona a área do browser e a linha passa a ter 9 tudo vai por água a baixo.

 

@media only screen and (min-width: 1024px)  {
#produtos ul:nth-child(10n+1) {
clear: left;
}
}