insérer deux div dans un div

welldom · 19 Janvier 2010

Voila je veux en premier div centrer au centre :
#page {
margin-left: auto;
margin-right: auto;
height:800px;
width: 980px;
margin: 0 auto;
border-right:1px dashed #333;
border-left:1px dashed #333;
border-bottom:1px dashed #333;
}

Puis je veux y insérer deux div respectivement bordure et centre qui seront aligner horizontalement :

#bordure{
width:150px;
height:600px;
float:left;
}

et

#centre{
width:700px;
padding-left:10px;
padding-right:10px;
border-right:1px dashed #333;
border-left:1px dashed #333;
float:left;
}

le div principal est bien au centre mais les deux autres sont l'un sur l'autre, donc si quelqu'un pouvait m'aider :?

Sullyvan · 19 Janvier 2010

bonjour,

avec un margin-left et pas de float sur #centre ça devrait faire l'affaire.

tryan · 19 Janvier 2010

salut,

Code:

#page {
height:800px;
width: 980px;
margin: 0 auto;
border-right:1px dashed #333;
border-left:1px dashed #333;
border-bottom:1px dashed #333;
padding:5px;
}
#bordure{
width:150px;height:600px;
float:left;
}
#centre{
width:820px;
border-right:1px dashed #333;
border-left:1px dashed #333;
float:right;
}

Fonctionne également ^^

welldom · 19 Janvier 2010

ça marche pas mais je crois que ça vient de #bordure

en fait #bordure reste au centre

tryan · 19 Janvier 2010

Tu as bien mit des "id" et non des class ???

Code:

<div id="page">
<div id="bordure">bordure</div>
<div id="centre">centre</div>
</div>

# = id = utilisation unique/page
. = class = utilisation multiple/page

welldom · 19 Janvier 2010

oui

en fait tout marchait bien avant que je centre #page

Sullyvan · 19 Janvier 2010

tu as essayé un text-align: left; dans #page ?

tryan · 19 Janvier 2010

Je viens de tester et ça fonctionne ...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-fr">
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type" />
  <title></title>
  <style type="text/css">
#page {
height:800px;
width: 980px;
margin: 0 auto;
border:1px dashed #333;
padding:5px;
}
#bordure{
width:150px;
height:600px;
float:left;
border:1px dashed #333;
}
#centre{
width:820px;
border:1px dashed #333;
float:right;
}
  </style>
</head>
<body>
<div id="page">
<div id="bordure">bordure</div>
<div id="centre">centre</div>
</div>
</body>
</html>

J'ai juste remplacé tes bordures pour bien visualiser. # page est centré et tes 2 autres class sont alignées horizontalement ... ou alors, il y a un truc que je n'ai pas comprit !

welldom · 19 Janvier 2010

ça marche pas non plus :!:

En fait si, l'erreur venait d'un div situé au dessus. Merci

tryan · 19 Janvier 2010

haaa, parce que là, c'est juste une partie de ton code ???

welldom · 19 Janvier 2010

benh oui :mrgreen:

tryan · 19 Janvier 2010

ok ... je ne note ton pseudo dans un coin pour m'avoir fait douté ^^!