Problema com quebra de divs

[comingsoon 0]

Gente, estou com um problema que eu acho que pode ser simples de resolver, e pode ser uma besteira que eu mesmo causei:

 

Olhem o código:

 

<div id="conteudo"> 
<div id="menu"></div>
<div id="linksuteis"></div>
<div id="conteudopersonagem"></div>
</div>

 

E o CSS é:

 

#corpo #conteudo {
height: 500px;
width: 960px;
background-color: #FFF;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
}

#corpo #conteudo #menu {
float: left;
height: 100%;
width: 230px;
}
#corpo #conteudo #conteudopersonagem {
float: right;
height: 100%;
width: 730px;
}
 
#corpo #conteudo #linksuteis {
float: right;
height: 100px;
width: 480px;
}

 

Aqui a imagem:

 

 

Problema: Quando eu escrevo nas divs até que cheguem na div de baixo, faz uma quebra monstruosa e a escrita "passa" por cima da div de baixo, como se ela não existisse. Queria que alguem pudesse me ajudar. Obrigado ^^

[Nícolas Luís Huber 14]

Vamos ver seu eu entendi seu problema - Se você inseriri um conteúdo muito grande, por exemplo na #linksuteis, o texto irá extrapolar o o tamanho, "invadindo" o espaço de outras div. Isso?

 

Se for isto é fácil de resolver, basta não definir um tamanho específico de height para a div. Por exemplo na div#linkuteis:

#linksuteis {
width: 480px;
float: right;
/*height: 100px;*/
}

 

A propriedade height, não precisa ser definida, assim o browser irá atribuir o tamanho conforme o conteúdo que se encontra nessa div.

 

DICA DA HORA :yes:

 

Você pode otimizar seu código, sempre que possível. Poderias resumir o código da borda simplesmente assim:

border: 1px solid #CCC;
border-bottom: none;

 

Você economiza 7 linhas de códigos e seu documento perde alguns bits desnecessários.

 

RECOMENDAÇÕES :innocent:

 

Aconselho ler o site abaixo para se especializar na criação de layouts com css:

:seta: http://www.maujor.com/tutorial/layout-css-passo-a-passo.php

 

 

[comingsoon 0]

Obrigado pelas dicas.

 

Não funcionou =x.

 

fiz umas gambiarras loucas aqui e deu certo, mas obrigado ^^

[Nícolas Luís Huber 14]

comingsoon você parece ser bem iniciante na área de desenvolvimento, então aconselho primeiramente ler algo sobre montagem de layout com (X)HTML e CSS. Recomendo assistir algumas vídeo aulas como esta aqui!

Você pode especificar melhor seu problema para podermos ajudar! Mesmo apresentando uma solução para você não soube ao certo qual era seu problema!

[Henrique Barcelos 290]

Precisa mesmo dar uma estudada melhor em alguns conceitos, rapaz:

:seta: http://forum.imasters.com.br/topic/341755-srie-de-video-tutoriais-sobre-webstandards-css/