comment diviser un div en 2 cellules

17 déc. 2008, 23:18

Bonsoir,

Je voudrais savoir comment je peux diviser un bloc div en 2 cellules, sans utiliser
table, j'ai essayé avec 2 div l'un étant en float left, et l'autre avec un margin-left
de la largeur de mon div de gauche, mais j'ai des décalages !

notez que mon div conteneur est dans le flux normal.

17 déc. 2008, 23:25

Code HTML

Code : Tout sélectionner

<div id="conteneur">
  <div></div>
  <div></div>
</div>

CSS

Code : Tout sélectionner

#conteneur {
  border: 1px solid;
  overflow: hidden;
}
#conteneur div {
  width: 50%;
  float: left;
}

Correctif CSS pour IE 6

Code : Tout sélectionner

#conteneur {
  height: 1%;
}

18 déc. 2008, 00:26

Merci infiniment,

il sert à quoi l' overflow: hidden

18 déc. 2008, 00:53

pour moi ça fonctionne bien avec

Code : Tout sélectionner

#conteneur {
  border: 1px solid blue;
  overflow: hidden;
}

#conteneur #left {
  width: 50%;
  float: left;
  height: 100px;
  background-color:#f00;
}

#conteneur #right {
  width: 50%;
  float: left;
  height: 100px;
  background-color:#000;
}

...

18 déc. 2008, 01:02

Effectivement ça fonctionne bien, mon ordi a du bugguer.

Par contre quand je remets le code dans mon div conteneur de mon site, j'ai un décalage entre mes
2 div gauche et droite (il ne sont pas alignés horizontalement) ?

18 déc. 2008, 01:19

Fait voir les codes complets...

18 déc. 2008, 01:27

CSS

Code : Tout sélectionner


/* --- POSITIONNEMENT --- */

/* Page */
html, body {
	height: 100%; /* Voir -> Note 1 ci-dessous */
}
body {
	padding: 0;
}
#global {
	min-height: 100%; /* -> 1 */
	width: 780px;
	overflow: hidden; /* -> 2 */
	margin-left: auto;
	margin-right: auto; /* -> 3 */
}

/* En-tête */
#entete {
	padding: 15px 20px 10px 20px;
}
#entete h1 {
	margin: 0;
}
#entete h1 img {
	float: left;
	margin: 7px 20px 10px 0;
}
#entete .sous-titre {
	margin: 4px 0 15px 0;
}

/* Menu de navigation */
#navigation {
	padding: 12px 15px;
}
#navigation ul {
	margin: 0;
	list-style: none;
	text-align: center;
}
#navigation li {
	display: inline;
}
#navigation a {
	padding: 6px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}

/* Contenu */
#contenu {
	/*padding: 10px 20px;  */
	margin: 0px;
	padding: 0;
	
}

#contenu > :first-child {
	margin-top: 10px;

}    

#contenu p, #contenu li {
	line-height: 1.5;
}

/* Pied de page */
#pied {	
	padding: 15px 20px;
	font-size: .85em;
}
#pied p {

	margin: .5em 0;
}
#copyright {
	text-align: left;
	font-size: 1em;
}
/* --- mes  CSS --------------------------------------/
#contenu { 
  overflow: hidden; 
  background-color:#999999;
} 

#contenu #left { 
  width: 50%; 
  float: left; 
  background-color: #f00;
  height: 300px;
}

 #contenu #right { 
  width: 30%; 
  float: left; 
  background-color: #000;
  height: 300px;
}
}

#entete h1 {
	color:#fff;
}

18 déc. 2008, 01:28

et le html?

18 déc. 2008, 01:29

XHTML

Code : Tout sélectionner


/* --- POSITIONNEMENT --- */

/* Page */
html, body {
	height: 100%; /* Voir -> Note 1 ci-dessous */
}
body {
	padding: 0;
}
#global {
	min-height: 100%; /* -> 1 */
	width: 780px;
	overflow: hidden; /* -> 2 */
	margin-left: auto;
	margin-right: auto; /* -> 3 */
}

/* En-tête */
#entete {
	padding: 15px 20px 10px 20px;
}
#entete h1 {
	margin: 0;
}
#entete h1 img {
	float: left;
	margin: 7px 20px 10px 0;
}
#entete .sous-titre {
	margin: 4px 0 15px 0;
}

/* Menu de navigation */
#navigation {
	padding: 12px 15px;
}
#navigation ul {
	margin: 0;
	list-style: none;
	text-align: center;
}
#navigation li {
	display: inline;
}
#navigation a {
	padding: 6px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}

/* Contenu */
#contenu {
	padding: 10px 20px;  	
}

#contenu > :first-child {
	margin-top: 10px;

}    

#contenu p, #contenu li {
	line-height: 1.5;
}

/* Pied de page */
#pied {	
	padding: 15px 20px;
	font-size: .85em;
}
#pied p {

	margin: .5em 0;
}
#copyright {
	text-align: left;
	font-size: 1em;
}
/* --- ajout CSS Marcgrenier--- */
#contenu { 
  overflow: hidden; 
  background-color:#999999;
} 

#contenu #left { 
  width: 50%; 
  float: left; 
  background-color: #f00;
  height: 300px;
}

 #contenu #right { 
  width: 30%; 
  float: left; 
  background-color: #000;
  height: 300px;
}
}

#entete h1 {
	color:#fff;
}

18 déc. 2008, 01:36

Humhum... et ça

Code : Tout sélectionner

#contenu > :first-child {
   margin-top: 10px;

}

C'est quoi?

18 déc. 2008, 01:39

bonne question

J'en sais rien, j'ai repris le code de template sur Internet.
et ce bout de code je ne le comprends pas.

Enfin je me doute qu'on met une marge au premier enfant de contenu

J'ai enlever ce code, et c'est bien aligner.

Merci

18 déc. 2008, 01:43

Fait des essais au lieu de t'aouver vaincu...!
Un peu d'énergie que diable!
Si tu met la valeur à Zero, tu remarqueras que le décalage n'est plus...
Et avec le mot firstchild, tu peux envisager que celà correponde au premier enfant de l'élément "contenu", après le signe > je te l'accorde on peut pas deviner.... mais chercher?
http://www.yoyodesign.org/doc/w3c/css2/ ... -selectors

Donc conclusion, que fait ce vout de code?

18 déc. 2008, 01:45

Merci infiniment

comment diviser un div en 2 cellules

Qui est en ligne