Mettre des div côte à côte

piRstone Messages postés 5 Statut Membre -  
animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour à tous,

Dans mon projet de BTS je dois réaliser une page web de pilotage d'éclairage et comme je débute en html & css et je suis coincé...
Je voudrais mettre des div côte à côte pour que d'un côté j'ai le pilotage et de l'autre les statistiques.

Voici une photo qui vous aidera à mieux comprendre : gauche ce que j'ai et à droite ce que je souhaite avoir.
http://www.hostingpics.net/viewer.php?id=201843rsultat.jpg

Voici le code HTML et CSS 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Service web KNX</title>
		<link href="css/siteknx.css" rel="stylesheet" type="text/css">
	</head>

	<body><center>

		
			<div class="contener">
            	<img src="images/banniere.png" alt="images/bannière" width="728" height="152" />
				<h3>Service de pilotage d'éclairage KNX</h3>
              		
               		  <div class="choixSalle">
                       		 <h2>Salle à commander</h2>
                       		 <select name="choix">
                        	    <option value="G131">Salle G131</option>
                      		 </select>
              			</div>
               		  <div class="pilotage">
               			  <p><img src="images/power-md.png" width="70px" height="70px" alt="Non défini"/> Côté couloir </p>
                            <p><img src="images/power-md.png" width="70px" height="70px" alt="Non défini"/> Côté fenêtres</p>
                            <p><img src="images/power-md.png" width="70px" height="70px" alt="Non défini"/> Tableau</p>
                		</div>
                   		<div class="eclairage" style="top: 185px">
                        <h2>Courbe d'éclairage</h2>
                        </div>
    		</div>
        
	</center></body>
</html>


Le CSS 

@charset "utf-8";
body {
	font: 16px Arial, Helvetica, sans-serif;
	background-color: #EBEBEB;
	text-align: center;
	color: #000000;
}

h2
{
	text-align: center;
	font-size: 20px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
}

.contener {
	background-color: #CCC;
	width: 800px;
	border: #515151;
	border-style: solid;
	font-family: Arial, Helvetica, sans-serif;
}

h3
{
	text-align: center;
	font-size: 25px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
}

.choixSalle {
	background-color: #b8b8b8;
	border-radius: 7px 7px 7px 7px;
	width: 300px;
	border:#515151;
	border-style:solid;
	margin:10px;
}

.pilotage {
	background-color: #b8b8b8;
	border-radius: 7px 7px 7px 7px;
	width: 300px;
	text-align: left;
	left: 80px;
	border-top-style: double;
	border-right-style: double;
	border-bottom-style: double;
	border-left-style: double;
	border-top-color: #515151;
	border-right-color: #515151;
	border-bottom-color: #515151;
	border-left-color: #515151;
	margin-left:10px;
	margin-bottom:10px;
}

.eclairage {
	background-color: #b8b8b8;
	border-radius: 7px 7px 7px 7px;
	width: 300px;
	border-top-style: double;
	border-right-style: double;
	border-bottom-style: double;
	border-left-style: double;
	border-top-color: #515151;
	border-right-color: #515151;
	border-bottom-color: #515151;
	border-left-color: #515151;
	margin-left:10px;
	margin-bottom:10px;
}


Merci d'avance pour votre aide :)

6 réponses

  1.
    alexdu17200 Messages postés 1579 Statut Membre 841
     
    Salut, tu peux mettre des 
    float:left;
    et des 
    float:right;
    En gros, tu joues sur le positionnement de tes classes sur ta page.
    Il y a aussi d'autres possibilité, un tableau a 2 colonnes sans bordure.
    0
  2. piRstone Messages postés 5 Statut Membre
     
    Ah oui y a aussi un souci : j'ai fais une div "générale" que je centre pour que la page soit au centre (un peut comme Comment ça marche), j'ai pas besoin d'un site qui prend toute la largeur du navigateur. C'est la seule méthode que j'ai trouvé pour faire ça. Du coup si je met des float, les div à l'intérieur sortent de ma div générale...
    0
  3. inspiring Messages postés 1936 Statut Membre 265
     
    ajoute un css 

    overflow:hidden;


    a tes div, ça les remettra en place
    0
  4. piRstone Messages postés 5 Statut Membre
     
    Je dois pas être doué ><
    Le float le sort toujours de l'autre div :$
    Il se retrouve en bas à droite (à cause du float:right) mais hors de ma div générale :/
    0
    1. alexdu17200 Messages postés 1579 Statut Membre 841
       
      Tu peux toujours faire un tableau sur 2 colonnes, avec un margin/padding pour l'écart entre les 2 colonnes.
      0
    2. piRstone Messages postés 5 Statut Membre
       
      Oui limite je crois que c'est sur ça que je vais me rabattre ^^
      0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. piRstone Messages postés 5 Statut Membre
     
    Bon j'ai fait avec un tableau et ça a bien marché !
    J'en ai fait un deuxième et lui j'aimerai bien le centrer dans ma div.
    Vous auriez le CSS pour le centrer ?
    0
  7. animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   738
     
    Ne fait surtout pas avec un tableau
    <table> = données tabulaires

    voici le code corrigé

    html

    <body>

    <div class="contener">

    <img src="images/banniere.png" alt="images/bannière" width="728" height="152" />
    <h3>Service de pilotage d'éclairage KNX</h3>

    <div class="choixSalle">
    <h2>Salle à commander</h2>
    <select name="choix">
    <option value="G131">Salle G131</option>
    </select>
    </div>
    <div class="eclairage">
    <h2>Courbe d'éclairage</h2>
    </div>

    <div class="pilotage">
    <p><img src="images/power-md.png" width="70px" height="70px" alt="Non défini"/> Côté couloir </p>
    <p><img src="images/power-md.png" width="70px" height="70px" alt="Non défini"/> Côté fenêtres</p>
    <p><img src="images/power-md.png" width="70px" height="70px" alt="Non défini"/> Tableau</p>
    </div>

    </div>

    </body>

    le css

    body {
    font: 16px Arial, Helvetica, sans-serif;
    background-color: #EBEBEB;
    text-align: center;
    color: #000000;
    }

    h2
    {
    text-align: center;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    }

    .contener {
    background-color: #CCC;
    width: 800px;
    border: #515151;
    border-style: solid;
    font-family: Arial, Helvetica, sans-serif;
    }

    h3
    {
    text-align: center;
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    }

    .choixSalle {
    background-color: #b8b8b8;
    border-radius: 7px 7px 7px 7px;
    width: 300px;
    border:#515151;
    border-style:solid;
    margin:10px 10px 10px 80px;
    float:left;
    }

    .pilotage {
    clear:both;
    background-color: #b8b8b8;
    border-radius: 7px 7px 7px 7px;
    width: 300px;
    text-align: left;
    border-top-style: double;
    border-right-style: double;
    border-bottom-style: double;
    border-left-style: double;
    border-top-color: #515151;
    border-right-color: #515151;
    border-bottom-color: #515151;
    border-left-color: #515151;
    margin-left: 80px;
    margin-bottom:10px;
    }

    .eclairage {
    background-color: #b8b8b8;
    border-radius: 7px 7px 7px 7px;
    width: 300px;
    float:right;
    border-top-style: double;
    border-right-style: double;
    border-bottom-style: double;
    border-left-style: double;
    border-top-color: #515151;
    border-right-color: #515151;
    border-bottom-color: #515151;
    border-left-color: #515151;
    margin: 10px 80px 0 0;

    }

    Un petit merci vaut mieux qu'une grande ignorance !
    Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
    0
    1. animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   738
       
      pour centrer un div

      #div {
      width: 300px;
      margin: 0 auto;
      }
      0

Discussions similaires

Aligner 2 photos côte à côte...
Dri80 -
tkyt -

10 réponses
Insérer double côte dans les données d'une colonne Excel (2007)
cs_douda06 -
Dan28 -

5 réponses
comment ecrire un double cote " "
helmii -
[Dal] -

3 réponses
aligner deux textes côte à côte sous Word
schuminator -
JPM -

14 réponses
Le son ne sort que d'un côté de mon casque, pourquoi ?
real1se -
LylouFR -

7 réponses