Déplacement de mes éléments à droite?

Je suis en train de travailler avec les langages HTML et CSS et je veux aligner la forme et le logo en plus vers la droite:

Déplacement de mes éléments à droite?

Les positions que je veux plus de ce genre si je fais une maquette:
Déplacement de mes éléments à droite?

Mon code HTML est

      <!DOCTYPE hml>
<html>
<head>  <link rel="stylesheet" href="/welcome/static/css/register.css"/>
<STYLE TYPE="text/css">
</STYLE> 
<title>{% trans %}Register new distributor{% endtrans %}</title>
</head>
<body>     <div id="content">
<form action="{{action}}" method="post"><img src="/welcome/static/images/reg-reg.gif">
<table><tr><td>
<label>Pers. number </label></td><td><input type="text" name="soc_sec" placeholder="{% trans %}Your social security number{% endtrans %}" />({% trans %}YYMMDDXX{% endtrans %})</td></tr><tr><td>
<label for="start">Sponsor ID</label></td><td>
<input type="text" id="start" name="Log1" size="3" maxlength="3" />
<input type="text" name="Log2" size="3" maxlength="3" />
<input type="text" name="Log3" size="3" maxlength="3" />
<input type="text" name="Log4" size="3" maxlength="3" />(<a href="/sponsor-id-info.html">{% trans %}What is a sponsor ID{% endtrans %}?</a>)</td><td></tr><tr><td>
<label>Email</label></td><td> <input type="text" name="email" placeholder="{% trans %}Your email{% endtrans %}" /></td></tr><tr><td>
<label>{% trans %}First name{% endtrans %}</label></td><td><input type="text" name="firstname" placeholder="{% trans %}Your first name{% endtrans %}" /></td></tr><tr><td>
<label>{% trans %}Last name{% endtrans %}</label></td><td><input type="text" name="lastname" placeholder="{% trans %}Your last name{% endtrans %}" /></td></tr><tr>
<td>
<label>{% trans %}Address{% endtrans %}</label></td><td><input type="text" name="address" placeholder="{% trans %}Your address{% endtrans %}" /></td></tr><tr><td>
<label>{% trans %}Zip code{% endtrans %}</label></td><td><input type="text" name="zipcode" placeholder="{% trans %}Your zip code{% endtrans %}" /></td></tr><tr><td>
<label>{% trans %}City{% endtrans %}</label></td><td><input type="text" name="city" placeholder="{% trans %}City{% endtrans %}" /></td></tr><tr><td>
<label>{% trans %}Phone{% endtrans %}</label></td><td><input type="text" name="phone" placeholder="{% trans %}Your phone number{% endtrans %}" /></td></tr></table>
<button>{% trans %}Next{% endtrans %}</button>
</form><img src="/welcome/static/images/snabbreg002.jpg"></div>
</html>

Et mon CSS est

BODY {background-image: url(/welcome/static/images/reg-bg.png); background-repeat: repeat-x; }
#content {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}

Pourriez-vous conseils sur la façon d'aligner mes composants plus à droite, comme dans l'image du bas?

Merci

Mise à jour

Maintenant, je pouvais aligner le logo à droite, tout ce qui reste à faire est de déplacer le formulaire à droite. Comment dois-je faire?

Déplacement de mes éléments à droite?

ajouter float:right sur l'élément que vous souhaitez rendre sur la droite
merci pour le commentaire. Je pouvais déplacer le logo à droite, maintenant je veux juste aligner le formulaire à droite, mais plus comme de centrage.
s'appliquent également float:right à la forme et à ajuster la largeur de la forme, il sera sur la droite, puis.

OriginalL'auteur Niklas Rosencrantz | 2012-02-07

  1. 2

    Votre css est bon, mais essayer de les appliquer à un div à l'intérieur de le contenu de la div:

    Html:

    <div id="content">
<div id="content-container">
<form ...>
...
</form>
<img id="image-logo" .../>
</div>
</div>

    Css:

    #content-container {
width: 700px ;
margin: 0  auto;
}
#image-logo {
float: right;
}

    Aussi, l'image a besoin d'un droit variable à la position que vous attendez.

    Merci pour la réponse. J'ai réussi à aligner le logo à droite. Maintenant, je veux déplacer le formulaire à droite, mais pas autant que le logo. J'ai mis à jour la question avec plus de détails.
    attention à ma réponse, dit-il à créer une div#contenu-contenant à l'intérieur de la div#contenu et d'appliquer le css de la div#contenu-contenant.
    Merci beaucoup @falsarella j'ai réussi à contrôler les composants maintenant avec des divs.

    OriginalL'auteur falsarella

  2. 2

    La façon la plus simple est probablement à l'aide du flotteur et/ou de marge.
    Vous pouvez positionner vos éléments avec flotteur, float:right;.
    Aussi jeter un oeil à la marge, par exemple : margin-left:100px;

    <img src="/welcome/static/images/snabbreg002.jpg" style="float:right;">

    Ou avec les css.

    <img src="/welcome/static/images/snabbreg002.jpg" class="img">

    css:

    .img{
float:right;
}
    Je vous remercie. Que a été a été dont j'avais besoin. Je l'ai mise à jour de la question avec le résultat. Maintenant, je tiens également à déplacer la forme d'un bit vers la droite, comme de centrage ou quelque chose comme ça. Comment peut-il être fait?

    OriginalL'auteur Stig Hausberg

  3. 2

    Ajouter style="float:right" à votre image.

    donner le style margin-left:10px; par exemple à votre formulaire

    OriginalL'auteur Hadas

  4. 1

    Vous pouvez envelopper le formulaire dans un div et le style de la div avec la marge de gauche.
    Vous pouvez également essayer d'aligner l'image à droite au lieu de gauche.

    Je vous remercie. J'ai pu fixer l'image. J'ai juste besoin de déplacer la forme maintenant. Je l'ai mise à jour de la question d'origine avec les mises à jour.
    juste le style de la div avec une marge gauche: dans votre css #content {margin-left: 200px;}

    OriginalL'auteur Pedro Morte Rolo

  5. 1

    Vous pouvez essayer ceci:

    #content {
position: absolute;
margin-left: 600px;
top: 400px;
}

    Vous avez à mettre le bon nombres de pixels.

    OriginalL'auteur GeekMasher

  6. 1

    float:right sur l'élément que vous voulez être déplacé vers la droite sur le même niveau

    OriginalL'auteur Akash Yellappa