Mettre deux div côte a côte?

Bonjour,

J'aimerais créer deux boîte avec un header pour cela j'ai fait comme ceci

div.header
{
width:379px;
color:#999999;
background: url("images/cellpic.gif") repeat-x 20px;
margin-top: 30px;
margin-left:200px;
margin-right:auto;
margin-top:auto;
}

div.news
{
width:377px;
height:200px;
color:#FFFFFF;
border: 1px solid #505F7D;
background-color:#374663;
margin-left:200px;
margin-right:auto;
margin-top:auto;
}

mais quelque chose me dit que c'est pas bien propre tout ca
mais ce qui me pose vraiment probleme c'est que je ne sais pas comment il faut faire pour mettre deux boîte côte a côte voici une image de ce que j'aimerai avoir http://img153.imageshack.us/img153/86/capture1ti1.gif
Merci d'avance pour votre aide.
Modifié par Abdellah (16 Jun 2007 - 13:25)

Abdellah a écrit :
mais ce qui me pose vraiment probleme c'est que je ne sais pas comment il faut faire pour mettre deux boîte côte a côte

Hello et bienvenue ici,

Comme tu t'en doutes, ta question est souvent posée puisqu'il s'agit des bases même du positionnement en CSS.

Je t'invite donc à avoir le réflexe de visiter les tutoriels de base, notamment celui nommé Comment positionner les éléments en CSS ?

Bonne lecture et bon apprentissage
Modifié par Raphael (16 Jun 2007 - 13:38)

Merci Raphael et j'aimerai te demander si tu connai la meilleur façon pour avoir une boite + header en un seule div? j'ai ajouté le code suivant pour deplacer ma boite

padding-top: 200px;

mais elle ne ce deplace pas elle s'elargi merci bien de m'aider svp
Modifié par Abdellah (16 Jun 2007 - 14:10)

Hello,

Abdellah a écrit :
avoir une boite + header en un seule div?

Heu... et concrètement, ça veut dire quoi ?

Abdellah a écrit :
mais elle ne ce deplace pas elle s'elargi

C'est le principe du padding. Tu as peut-être confondu avec margin (et en l'occurrence margin-top) ?

Merci Florent pour (margin-top) et excusez moi de vous déranger,
jai reussi a faire ceci http://img148.imageshack.us/img148/8052/capture2wh5.gif

maintenant je suis bloquer au niveau header. c'est une petite image qui fait 3X25 que je veut mettre en header sur chaque tableau en repeat-x 20px;
j'espere que l'explication est compréhensible je suis un gros noob encore si vous avez des lien qui peuvent m'aider de ce coté la je suis preneur Merci.
Modifié par Abdellah (16 Jun 2007 - 15:32)

C'est une image avec une information, ou c'est juste de la déco ? Pour de la déco pure (ou à la rigueur une information redondante) on peut mettre ça en image de fond via les CSS.

On peut voir ce que c'est censé donné graphiquement, pour mieux te conseiller ?

Salut,
C'est une image avec du texte que j'aimeari avoir j'ai essayé border-top-image mais ca ne marche pas!

Merci.

Bonjour,
enfin j'ai reussi a avoir ce que je voulais je vai mettre la réponse pour les gens qui ont le meme probleme voila j'ai fait comme ceci:

->Pour avoir deux div côte a côte

/* Les deux colonnes */


#conteneur
{
   width:auto;
   margin-top:20px;
   padding-bottom:25px;
   background-image:url(images/fond.jpg);
   padding-top:5px;
}

#colonne1
{
   width:300px;
   height:200px;
   background-color:#374663;
   float:left;
   border: 1px solid #505F7D;
}

#colonne2
{
   width:300px;
   height:200px;
   background-color:#374663;
   float:right;
   border: 1px solid #505F7D;
}

->le header

.bordure {background: url("images/cellpic.gif") repeat-x 20px; border: 1px solid #505F7D;}

->et dans mon code HTML

<div id="colonne1">
     <div align=center class=bordure>blablablabla</div>
     blablabla</div>

   <div id="colonne2">
     <div align=center class=bordure>blablabla</div>
     blablabla
   </div>