[Résolu] Probleme avec alignement de div - impossible de mettre deux divs l'une a coté de l'autre 0_o par Drunk`Sci - page 1

Bonjour,

Comme j'ai du temps libre en ce moment je me suis mis au boulot (php etc ^^) mais bon on dirait qu'avec le manque de pratique j'ai pas mal oublié toutes les bases.
Alors voici le probleme :
J'ai une page avec dedans une div (#global) qui contient trois autres divs (#setupInfo, #main et une autre qui fait clear:both; pour allonger le couleur background de #global)
#setupInfo est enfait une sorte de menu qui doit etre a coté de #main donc.
Le probleme est qu'au lieu de se placer comme je veux, ça fait ça : Image

Voici le code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>PHd CMS - Choose install language</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link rel="stylesheet" type="text/css" href="tpl/style.css" />
</head>
<body>
<div id="global">
<div id="setupInfo">
[LOGO]<br /><br />

</div>
<div id="main">
<h2>Choose install language</h2>
<form method="post" action="/deek/Organise/install/index.php">
<p>
<label for="lang">Choose your language from the list below :</label>
<select name="lang" id="lang">
<option value="en" selected="selected">English</option>

<option value="fr">Français</option>
</select>
<input type="submit" value="Send" class="button" />
</p>
</form>
</div>
<div style="clear:both;"></div>
</div>
</body>

</html>

et le code css

html, body {

margin:0;

padding:0;

text-align:center;

background: #1c4065;

font-family: "Lucida Sans Unicode", Tahoma, Arial, sans-serif;

color:#000;

font-size: 0.9em;

}

h1, h2, h3, h4, h5, h6 {

margin:0;

padding:0;

}

p {

text-indent:20px;

}

#global {

text-align:left;

width:60%;

margin: 0 auto 0 auto;

padding:2px;

background:#fff;

border:1px solid #ccc;

border-top:none;

}

#setupInfo {

background:#092d51;

color:#fff;

width:25%;

height:100%;

margin:0;

padding:0;

}

#main {

float:right;

background:yellow;

margin:0;

padding:0;

}

input {

font-size:0.9em;

border:1px solid #eee;

background:#f5f5f5;

color:#000;

padding:1px;

font-family: "Lucida Sans Unicode", Tahoma, Arial, sans-serif;

}

input:hover {

background:#f9fff1;

}

input:focus {

background:#f9fff1;

}

label {

text-align:right;

width:40%;

float:left;

}

label:hover, .button {

cursor:pointer;

}

Je sais que c'est long mais si vous avez une quelconque idée du probleme dites s'il vous plait

Drunk`Sci

20 janvier 2006 à 17:30:32

Deeder

20 janvier 2006 à 18:08:10

Peux tu nous expliquer clairement ce à quoi tu voudrais arriver pour que nous puissions t'aider car là on ne sait pas ce qui ne va pas...

20 janvier 2006 à 18:16:20

Enfait c'est super simple mais j'arrive toujours pas alors je vous explique ce a quoi je voudrais arriver en image (tadam) :
Image utilisateur

musicaelle

21 janvier 2006 à 0:15:08

j'ai joué avec ton code dans nvu.
il faut que ta div main soit flottante à gauche
déjà ça...

kabuto_fr

21 janvier 2006 à 4:30:08

Salut,
Tu as 2 solutions.
1er solution jouer sur le CSS

tu met un float: left; a #setupInfo
et tu enleve le float:right de #main.

2em solution jouer surle HTML.

Tu met le div #main avant le div #setupinfo.

Voila a toi de choisir ce qui te convien le mieux.
Personelement je prefere la 1er solution.
@+

21 janvier 2006 à 5:18:33

Milles merci a tout le monde, finalement j'ai juste rajuté une largeur a #main grace aux conseils de musicaelle merci beaucoup

Probleme avec alignement de div

impossible de mettre deux divs l'une a coté de l'autre 0_o

Probleme avec alignement de div

Supprimer

Modérer

Signaler le message aux modérateurs