Bonjour, j'ai une mise en page en deux colonnes avec header et footer, centrés (body { margin: auto; }).
Dans le header, je souhaite placer tout en bas et tout à droite une formulaire de recherche.
J'avais réussi (en appliquant un position relative au header, et un position absolute à la div du formulaire de recherche).
Le problème, c'est que çà marchait partout sauf IE <= 7 ! Avec IE <= 7, le header n'était plus centré.

J'ai conclu que le problème venait de position: relative et donc je l'ai enlevé. Ça a corrigé le problème mais malheureusement la div du form de recherche n'est plus placée où je veux ! (Il faut que l'élément parent ait une position relative). Maintenant j'obtiens cela partout :

 
Un peu de code :

body {
    margin: auto;
    text-align: center;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    width: 890px;
    background: #EDF1E4;
    border: 1px solid #600;
}
 
div#main {
    margin: 0;
    text-align: left;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: #85612F;
}
 
div#header {
        /* main child */
    background: #95AA9D;
    height: 200px;
    border-bottom:5px solid #600;
    background: url("header.jpg" );
}
 
div#search {
        /* header child */
    position: absolute;
    height: 45px;
    top: 170px;
    right: 20px;
}

 
La CSS complète : http://www.lucasavoie.com/skietudearavis/style.css
La page : http://www.lucasavoie.com/skietudearavis/
 
Donc ma question est : comment faire pour que mon header soit centré et mon champs de recherche positionné exactement en bas à droite du header quoi qu'il en soit ?
 
Merci !

Je viens de tester avec IE7 et FF : en rajoutant position:relative; dans le div#header ça fait ce que tu attends...
IE6 je peux pas dire par contre.

div#search {
position:relative; // Pour placer dans le header
width:100%;// Pour occuper toute la largeur du header
text-align:right; //Pour tout aligner à droite
top:130px;// pour placer en bas

Sinon, il y a toujours le vertical-align...
 
EDIT : Ah ! PunkRod est plus fainéant mais plus intelligent  

J'ai testé avec IE NetRenderer (http://ipinfo.info/netrenderer/index.php)
Et le header n'était pas centré
 

div#search {
position:relative; // Pour placer dans le header
width:100%;// Pour occuper toute la largeur du header
text-align:right; //Pour tout aligner à droite
top:130px;// pour placer en bas

Merci, çà marche nickel partout, et mieux sous IE 7 et <.
Je dis "mieux" parce que la div n'est pas tout à fait à droite (décalage de 60 à vue de nez vers la gauche )
 
IE NetRenderer merde peut-être non ?

Et aussi, je ne comprends pas bien pourquoi, mais impossible d'appliquer un padding/margin à la div search pour ne pas qu'elle colle au bord
Merci pour vos réponses en tout cas

pour le decalage sous IE, tu peux le rajouter une propriété "right" via javascript qui s'appliquerai que pour ce navigateur.
Sinon, il faut mettre le padding à header...
C'est peut etre le 100% en largeur qui gene le margin...
Dans tous les cas, donne bien la position relative à header !

 
J'ai utilisé le "vrai IE". Peut être que le netrenderer prête de mauvaises intentions à IE

Ok
 

Oui mais je voudrais être sûr tu comprends.
 
Merci à tous alors