Usamos DIVs geralmente para
dividir nossa página

em caixas diferentes, redimensioná-las 
e movê-las.

Isso ajuda o designer decidir
como quer o layout

se ficou como desejado.

Por hora, vamos ignorar o objetivo
de deixar a página bonita

e apenas ver como mudar as coisas.

Vamos redimensionar a DIV "official-info"

Por padrão, uma div tem 100% da 
largura disponível

Por isso a caixa cinza usa toda a página.

Mas talvez eu queira somente
300 px.

Vou adicionar outra propriedade CSS aqui:

width: 300px;

Funcionou, mas vamos fazer 
algo diferente.

Vamos usar largura percentual,

e dizer que esta div terá 70% 
da largura disponível.

Agora o texto ficará dentro
desta caixa pequena,

e a DIV ficou mais alta.

Podemos limitar também a altura da caixa

com a propriedade height:

height: 180px;

Algo interessante aconteceu.

A caixa cinza ficou com 180 pixels,

Mas o texto passou
o limite da caixa cinza.

Por que isso aconteceu?

Por causa da propriedade 
chamada "overflow"

O valor padrão para 'overflow'
é 'visible',

fazendo com que o elemento redimensione,
mas o conteúdo passe por fora dele,

ficando meio estranho.

Quais opções temos para overflow?

Bem, podemos tentar 'hidden'.

Isso cortou o conteúdo, 
limitando ele na borda

Que não é bem o que queremos,

porque nossos usuários não 
conseguirão ler toda informação

Nós podemos também tentar 'auto',

que diz ao navegador para adicionar 
barra de rolagem se necessário

Agora eu posso rolar o texto dentro 
da caixa e vê-lo completo

Podemos também ser mais específicos:

definindo rolagem para cada direção.

Por exemplo, se quisermos

rolar na direção y, 
para cima e para baixo,

apenas colocamos: 
overflow-y: auto;

mas então, limitá-lo na direção x,

podemos colocar: 
overflow-x: hidden;

Sempre tenha cuidado ao usar overflow,

porque rolagens podem ser irritantes 
para o usuário.

Especialmente quando uma dentro de outra

se puder, evite-as.

Vamos voltar agora para largura e altura
Podemos usar largura e altura

para todos os tipos de elementos,
como nossas imagens.

Agora que você conhece CSS, sabe que pode
usar as propriedades width/height

em vez de atributos width e height.

Vamos aumentar um pouco essa imagem 
de gato adicionando um id, "cute-cat"

deletando o atributo,

e criando nossa regra de estilo, digamos:
#cute-cat {

width:120px;

Assim como antes nos atributos,

é melhor somente especificar
largura ou altura,

e deixar o navegador calcular o melhor
valor para a outra dimensão.

Do contrário, 
teremos um gatinho esmagado!

Bem, isso parece impressionante, 
vamos tentar por um segundo:

height: 40px;

gato esmagado!!

Ok, ok, me diverti aqui.

Serei uma desenvolvedora web legal
e vou deletar isso agora.

Quanto mais conhecimento você tem,

maiores serão suas responsabilidades.

Só porque você pode adicionar
barra de rolagem em tudo

e esmagar todos os gatinhos
não quer dizer que você vai fazer.

Geralmente você está fazendo
sites para outras pessoas usarem,

e o que você acha interessante pode
ser difícil para outra pessoa usar.

Mas se você fizer coisas legais aqui no
Khan Academy, eu não vou me importar.

Legendado por [Paulo Trentin]
Revisado por [Cainã Perri]