Mettre deux div l'une à côté de l'autre...

Bonjour à toutes et à tous!

Depuis quelques jours, je cherche sans succès comment mettre mes deux div l'une a coté de l'autre. J'ai trouvé pas mal de réponses, mais aucune ne marche avec moi...
Il faut dire que je ne suis pas un expert en développement mais bon

Voici mon CSS:

.box_header_left	{
	background-image:url(../images/box_header_left.png);
	background-repeat:no-repeat;
	width:292px;
	height:34px;
	text-align:center;
	font-size:14px;
	color:#FFFFFF;
	font-weight:bold;
}
.box_content_left	{
	background-image:url(../images/box_content_left.png);
	background-repeat:repeat-y;
	padding:15px;
	font-size:12px;
	background-position:left;
	max-width:260px;
}
.box_footer_left	{
	background-image:url(../images/box_footer_left.png);
	background-repeat:no-repeat;
	width:292px;
	height:11px;
}

Voilà pour ma première box que j'ai découpé en 3 (header, content et footer)
Et maintenant celle que je veux mettre à côté:

.box_header_right	{
	background-image:url(../images/box_header_right.png);
	background-repeat:no-repeat;
	width:678px;
	height:11px;
}
.box_content_right	{
	background-image:url(../images/box_content_right.png);
	background-repeat:repeat-y;
	padding:10px;
	font-size:12px;
}
.box_footer_right	{
	background-image:url(../images/box_footer_right.png);
	background-repeat:no-repeat;
	width:678px;
}

Voilà, et s'il y a des erreurs dans ce CSS, merci de me les faire parvenir même si c'est pas le problème actuel, ça pourras toujours servir

Merci d'avance!
Modifié par alma66 (23 Dec 2013 - 23:31)

Hello,

Difficile de te venir en aide, sans le code HTML, sans avoir accès à tes images ou mieux à ton design avant découpe
L'idéal ce serait une page de test en ligne pour voir ce que tu as déjà mis en place

Oui bien sûr, j'avais oublié x)
Le code html (box de gauche, les deux car c'est les mêmes)

<!-- Box nouveaux lots -->
<div class="box_header_left">Nouveaux lots</div>
<div class="box_content_left">
	<img src="images/lots/nikon_d5200.png" style="float:left"; />
   	 	<strong>Nikon D5200</strong>
    	<p>Description</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    <img src="images/lots/tv_sony_4k.png" style="float:left"; />
    	<strong>Tv Sony 4K</strong>
    	<p>Description</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p align="right" style="color:#CC6600"><strong>Plus...</strong></p>
</div>
<div class="box_footer_left"></div>
<p>&nbsp;</p>

HTML de la box que je veux mettre à coté:

<div class="box_header_right"></div>
<div class="box_content_right">texte</div>
<div class="box_footer_right"></div>

http://image.noelshack.com/fichiers/2013/52/1387838065-pb.jpg

Voilà

La solution la plus simple pour mettre 3 div l'un à côté de l'autre est d'utiliser la proriété css : float.

Par exemple, imagine qui tu ais un div d'une largeur de 1000px qui englobe toute la page.
Tes 3 blocks devront être définis de cette façon :

.block {
float:left;
width:333px;
margin:0;
padding:0;
}

Puis après, l'idéal est de mettre un <br clear="both" /> pour que le contenu se mette normalement sous les 3 blocks.

Donc

<div id="general">

<div class="block">aaa</div>
<div class="block">bbb</div>
<div class="block">ccc</div>

<br clear="both" />

suite..

</div>

Modifié par AppellBlackstockB82 (24 Dec 2013 - 13:43)

salut,
je pense qu'au contraire le float pour aligner est la solution la moins simple.
Il suffirait de passer tes <div> en "display:inline-block" ou alors utiliser la mise en page en tableau (en CSS bien sûr).

Zelalsan a écrit :
salut,
je pense qu'au contraire le float pour aligner est la solution la moins simple.
Il suffirait de passer tes &lt;div&gt; en &quot;display:inline-block&quot; ou alors utiliser la mise en page en tableau (en CSS bien sûr).

+1

Rien ne marche, j'ai essayer tout ce que vous m'avez proposé, mais sans réussite
Ça me déforme complètement mes box... Mais merci quand même de votre aide
Modifié par alma66 (27 Dec 2013 - 21:20)

Bonsoir,

Le sujet a été traité de nombreuses fois sur le forum avec des exemples en ligne.
Le web regorge d'informations, de tutoriels te permettant de parvenir à tes fins...
Ici même, dans la section Apprendre, Benjamin fait le tour de la question :
Mise en page CSS avancée grâce à la propriété display

Un peu de persévérance et d'abnégation si tu veux parvenir à progresser...