Page 1 sur 1
comment diviser un div en 2 cellules
Posté : 17 déc. 2008, 23:18
par stakanof
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.
Posté : 17 déc. 2008, 23:25
par Victor BRITO
Code HTML
CSS
Code : Tout sélectionner
#conteneur {
border: 1px solid;
overflow: hidden;
}
#conteneur div {
width: 50%;
float: left;
}
Correctif CSS pour IE 6
Posté : 18 déc. 2008, 00:26
par stakanof
Merci infiniment,
il sert à quoi l' overflow: hidden
Posté : 18 déc. 2008, 00:53
par jojolapine
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;
} ...
Posté : 18 déc. 2008, 01:02
par stakanof
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) ?
Posté : 18 déc. 2008, 01:19
par jojolapine
Fait voir les codes complets...
Posté : 18 déc. 2008, 01:27
par stakanof
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;
}
Posté : 18 déc. 2008, 01:28
par jojolapine
et le html?
Posté : 18 déc. 2008, 01:29
par stakanof
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;
}
Posté : 18 déc. 2008, 01:36
par jojolapine
Humhum... et ça
C'est quoi?
Posté : 18 déc. 2008, 01:39
par stakanof
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
Posté : 18 déc. 2008, 01:43
par jojolapine
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?
Posté : 18 déc. 2008, 01:45
par stakanof
Merci infiniment