Faire tenir deux blocs l'un à côté de l'autre... [Résolu]

Bonjour,

Je cherche à faire pour la première fois ma mise en page en CSS.
1er écueil : je n'arrive pas à positionner les deux blocs 'header' l'un à côté de l'autre . Voici le code incriminé:

#header1
{
margin-right:0;
padding:0;
width:770px;
height: 75px ;
background-color:#999999;
}

#header2
{
margin-left:770px;
width:100%;
height: 75px ;
background-image: url(img/css/pages_02.jpg);

#content{
width:770px;
background-color:#333333;
}...

Si quelqu'un peut m'orienter...
Modifié par albius (27 Sep 2006 - 12:05)

Bonjour,

Cherche du côté de la propriété float ...
sur que ça va t'aider

Bonjour,

Merci pour la réponse. Ca m'a aidé, mais sans plus, car l'attribution de cette propriété reste encore floue pour moi.
Toutefois subsiste un problème. Le bloc est bien positionné maintenant, mais il se créé un léger espace entre les deux blocs sous IE, alors que je n'ai rien sous Firefox. je redonne le code corrigé:

#header1
{
float: left;
padding:0;
width:770px;
height: 75px ;
background-color:#999999;
}

#header2
{
margin-left:770px;
width:100 %;
height: 75px ;
background-image: url(img/css/pages_02.jpg);
}

Le code HTML:

<div id="header1"><img src="img/pages_01.jpg" width="770" height="75"></div>
<div id="header2"></div>
<div id="content">Lorem ipsum dolor...</div>

Merci,

Bonjour,

Cest le bug IE "Three pixel jog", il y a plusieurs solutions à ce problème qui vont dépendre de l'utilisation finale de tes blocs.

http://www.test.blog-and-blues.org/haslayout/tests/float6.html

Merci, mais je ne comprends pas du tout ce que je dois faire. Il parle de layout, ça correspond à la balise div ? Je dois la supprimer ?

Bonjour,

A la vue de ton code, je suppose que tu veux diviser ton header en deux, car une partie est un fond de couleur, et une partie est une image. Peut être peux tu le faire plus simplement, en utilisant une seule <div> dans laquelle tu auras ton image positionnée à droite, et une couleur de fond à cette div, qui remplira tout l'espace non occupé par l'image.
Enfin ce n'est qu'une supposition de ton intention sans en avoir vu la page en réalité. Mais si c'est le cas je pense que tu te simplifiera la vie.
Un code dans ce genre la :

#header {
width: 100%;
height: 75px ;
background-color:#999999;
background: url(img/css/pages_02.jpg) 770px 0 repeat-x;
}

A modifier bien évidemment en fonction du résultat voulu, si le background doit se répéter ou pas.

En espérant que ca t'aide, sinon j'aurais tapé à côté de la plaque

Bonjour,

La taille de header2 à 100% ne doit pas aider ...

#header1

{
float: left;
padding:0;
width:770px;
height: 75px ;
background-color:#999999;
}

#header2
{
margin-left:770px;
height: 75px ;
background-image: url(img/css/pages_02.jpg);
}

S'il s'agit juste d'un effet de fond, je rejoins Mikachu.

Oh, mais quel couillon je fais!!! Pourquoi je n'y ai pas pensé!! D'autant plus qu'on peut faire la même chose avec les tableaux...
Merci bien Vero et Mikachu.