28172 sujets

CSS et mise en forme, CSS3

Mettre deux éléments cote a cote

Bonjour,

J'ai une image en format GIF et j'aimerai mettre juste à coté à droite, un formulaire de connexion. J'ai déjà créé une div pour le formulaire de connexion et pour l'image mais je ne sais pas comment les mettre côte à côte.

Pouvez vous m'aider s'il vous plaît ?

Merci d'avance.
En mode "quick and dirty", tu peux faire:
<img src="moi-bogosse.gif" style="float:left;" alt="Moi" />
<form style="clear: both">
...
</form>

Faudra donner ton code pour avoir mieux
Modifié par bazooka07 (30 Sep 2018 - 10:51)
Merci beaucoup pour ta réponse, j'ai essayé de rajouter le float;left, mais le problème c'est que il se colle tout à gauche (c'est de ma faute, j'ai pas bien précisé le problème), je te montre le code de l'image gif et du formulaire : 
<img src="infopannel2.gif" alt="INFOPANNEL" style="float:left;" width="500"/>
<div id="frm">
    <form action="process.php" method="POST">
	<p>
	    <input type="text" id="user" name="user" placeholder="Username" />
	</p>
    <p>
	    <input type="password" id="pass" name="pass" placeholder="Password"/>
	</p>
	<p>
	    <input type="submit" id="btn" name="Login" value="Login" />
	</p>
	
	
	</form>
</div>

J'aimerai qu'ils soient côte à côte mais pas collés, ni aux bords de la page, ni entre eux..
Y'a t-il une autre solution ?
Il faut rajouter des marges. Sur l'image par exemple. Genre :
margin : 0 1em

Et sur le formulaire :
margin-right : 1em


Tout ça ne fera pas une solution très propre, mais comme on dit : "ça marche"...
Moi je serais parti sur un modèle tabulaire, ou en flexbox.
Modifié par Olivier C (01 Oct 2018 - 08:36)
Administrateur
bazooka07 a écrit :
En mode "quick and dirty", tu peux faire:

Hello,

Tu as testé ?
Sachant que "clear" interdit à un élément de se placer à côté d'un flottant, ce serait justement l'inverse de ce qu'il souhaite Smiley ohwell
Effectivement j'ai parlé un peu vite.
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head><body>
<p style="background: #aee;">debut</p>
<div style="background: #eae;">
	<img src="moi-bogosse.gif" height="150" width="150" style="float:left; background: #eee; margin-right: 1rem;" alt="Moi" />
	<form method="post" style="float:left; background: #eea;">
		<p>
			<label>Label 1</label>
			<input name="input1" />
		</p>
		<p>
			<input type="submit" />
		</p>
	</form>
	<hr style="clear: both; visibility: hidden" />
</div>
<p style="background: #aee;">fin</p>
</body></html>

Mais cela c'était avant "display: grid".
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<style>
		#container {
			display: grid;
			grid-template-columns: 150px 15rem;
			grid-column-gap: 1rem;
			justify-content: center;
			background: #eae;
		}
	</style>
</head><body>
<p style="background: #aee;">debut</p>
<div id="container">
	<img src="moi-bogosse.gif" alt="Moi" style="background: #eee;"/>
	<form method="post" style="float:left; background: #eea;">
		<p>
			<label>Label 1</label>
			<input name="input1" />
		</p>
		<p>
			<input type="submit" />
		</p>
	</form>
</div>
<p style="background: #aee;">fin</p>
</body></html>
Raphael a écrit :
Tu as testé ?
Sachant que "clear" interdit à un élément de se placer à côté d'un flottant, ce serait justement l'inverse de ce qu'il souhaite Smiley ohwell

@Raphael : Et bien, de mon côté j'avais testé le code proposé et... ça fonctionnait comme tel.

Mais je n'avais pas regardé les tenant et aboutissant du code pour me contenter de proposer une solution pour les marges. En effet, positionner des div avec float je n'aime pas trop ça (même si "ça marche"), donc je ne me suis pas penché sur cette partie de la question...
Modifié par Olivier C (02 Oct 2018 - 11:27)
Le mieux est d'utiliser "display: grid;"

@Jencal,
La modestie a toujours était mon pêché mignon Smiley lol
Sujet clos
Aller à