Atiweb Blog
internet, graphisme, développement web, référencement, jeux, cinéma, tv, ...
actualité, événement, analyse, coup de coeur, ...
Atiweb sur Facebook
Atiweb sur Twitter
Flux RSS d'Atiweb
Chaine Youtube d'Atiweb

Astuce CSS : largeur à 100% d'un élément en postion absolue

Astuce CSS

L'astuce CSS du jour concerne le postionnement absolu d'un bloc avec une largeur de 100%.

Le positionnement absolu d'un bloc ou autre élément HTML avec une largeur à 100% peut souvent poser des problèmes aux développeurs. Voici une méthode assez simple pour se passer de tout script JavaScript ou autre hack en tout genre.

 

La méthode en CSS

Tout d'abord avec "position:absolute" oubliez l'attribut "width:100%" ou "width:auto", en rajoutant le moindre margin, padding ou border, votre bloc va déborder de son élément parent. C'est tout à fait logique vu que les marges sont toujours ajoutées à la largeur du bloc. Ce n'est pas ce que l'on cherche au final.

L'astuce CSS pour un positionnement absolu

Dans votre style CSS, il suffira simplement d'utiliser les paramètres "left:0px" et "right:0px" et voila votre bloc en position absolue prend toute la largeur de l'élément parent.

L'astuce en plus pour un positionnement relatif

Pour un bloc en "position:relative", préférez toujours "width:auto" à "width:100%", cela vous évitera les mêmes problèmes avec les marges qui débordent. A noter que par défaut un élément avec "position:relative" et "display:block", aura la valeur "auto" pour l'attribut "width".

 

A bientôt pour d'autres astuCeSS !

Partager l'article sur
article publié le 18-05-2012 par Steph /
Catégorie : Développement
Commentaires
Aucun commentaire pour le moment
Nom
 
Adresse e-mail
(ne sera pas publié)
 
Site Internet
(facultatif)
 
Votre message
 
Code de vérification
Captcha Recharger l'image
Recopiez le code ci-dessus
 
 

 


Astuce CSS : largeur à 100% d'un élément en postion absolue
Cette actualité a été lue 9625 fois
Actualités
Recherche

Catégories

Liens

Les articles au top !




...
blog.atiweb.fr Mentions légales Agence Web Atiweb ...
112 actualités sur le blog
46 commentaires de visiteurs
Astuce CSS : largeur à 100% d'un élément en postion absolue - Développement
Atiweb Blog / Web / Internet / Référencement / Positionnement / Moteur de recherche / Graphisme / HTML / CSS