loading...

Design Receptivo – Dicas de Width auto vs 100%

27/02/2012 - 15:18 - por: Pedro Costa Neves

postato em: CSS, Old, Quick Tip

Tags:
Comentários neste post: Comentários.

Uma coisa que vejo muita gente se perdendo na hora de fazer sites Receptivos é quando a largura dos itens. Uma formula facil e rápida é a seguinte:

Se o objeto tem padding ou margin utiliza-se width: auto;width: 100%;.

Por que disso?

Se você utilizar width 100% e somar com padding ou/e margin dará bem mais que 100%, e se você usar auto, e somar com padding e/ou margin dará 100% exatos ;) o navegador se encarrega de calcular para você.

  • MisteRM

    Obrigado, percebi isso na pratica estava com problema pois eu alinhei o elemento com position e left, mas uma dica, se você utiliza position:absolute o width:auto, não consegue ter 100% de largura. neste caso você tem que utilizar float.

  • http://www.facebook.com/leomar.junio.silva Leomar Junio

    Tenho uma div #corpo de width de 924px; e dentro dela queria colocar outra que ocupasse seu tamanho todo com + um padding e border de 1px (sem ultrapassar os 924px).

    Quando uso o width:100%; ela ultrapassa os 924px e quando uso o width:auto; ela fica do tamanho do conteúdo que ta dentro dela ou seja se o conteúdo for 300px ela tera 300px

    Meu codigo css
    #corpo{width:924px; float:left; height:100%;}
    .favorito_bar{ width: auto; padding:5px; border:1px solid #D5D5D5; border-radius:3px; margin-bottom:10px; float:left; background:#f9f9f9; }

    Onde esta meu erro amigo?
    Obrigado pela atenção e ótimo post

  • persocon

    ok, vamos la, tem como vc montar isso pra mom no jsfiddle.net preu visualizar melhor?

    mas de regra geral, tenta dar padding nos elementos filhos de .favorito_bar ao inves de padding nele mesmo pois se for nele mesmo vc aumenta em X(x sendo o valor do padding) o seu width ou height

  • http://www.facebook.com/leomar.junio.silva Leomar Junio

    Amigo muito obrigado pela resposta, este é o link http://jsfiddle.net/r3UEt/
    Confesso que não entendi muito bem, este negocia de pai e filho me tira do serio rsrsrs

  • persocon

    Dá uma olhada aqui: http://jsfiddle.net/r3UEt/2/

  • http://www.facebook.com/leomar.junio.silva Leomar Junio

    Amigo muito obrigado, serio muito obrigado mesmo. Descobrir o erro graças a seu código. Era o float:left; tirei ele e pronto tudo ok.