Note that there are some explanatory texts on larger screens.

plurals
  1. POMoving my elements to the right?
    primarykey
    data
    text
    <p>I'm working with HTML and CSS and I want to align the form and the logo more to the right:</p> <p><img src="https://i.stack.imgur.com/MbD53.png" alt="enter image description here"></p> <p>The positions I want are more like this if I do a mockup: <img src="https://i.stack.imgur.com/vvc4V.png" alt="enter image description here"></p> <p>My HTML is</p> <pre><code> &lt;!DOCTYPE hml&gt; &lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" href="/welcome/static/css/register.css"/&gt; &lt;STYLE TYPE="text/css"&gt; &lt;/STYLE&gt; &lt;title&gt;{% trans %}Register new distributor{% endtrans %}&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="content"&gt; &lt;form action="{{action}}" method="post"&gt;&lt;img src="/welcome/static/images/reg-reg.gif"&gt; &lt;table&gt;&lt;tr&gt;&lt;td&gt; &lt;label&gt;Pers. number &lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="soc_sec" placeholder="{% trans %}Your social security number{% endtrans %}" /&gt;({% trans %}YYMMDDXX{% endtrans %})&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt; &lt;label for="start"&gt;Sponsor ID&lt;/label&gt;&lt;/td&gt;&lt;td&gt; &lt;input type="text" id="start" name="Log1" size="3" maxlength="3" /&gt; &lt;input type="text" name="Log2" size="3" maxlength="3" /&gt; &lt;input type="text" name="Log3" size="3" maxlength="3" /&gt; &lt;input type="text" name="Log4" size="3" maxlength="3" /&gt;(&lt;a href="/sponsor-id-info.html"&gt;{% trans %}What is a sponsor ID{% endtrans %}?&lt;/a&gt;)&lt;/td&gt;&lt;td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt; &lt;label&gt;Email&lt;/label&gt;&lt;/td&gt;&lt;td&gt; &lt;input type="text" name="email" placeholder="{% trans %}Your email{% endtrans %}" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt; &lt;label&gt;{% trans %}First name{% endtrans %}&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="firstname" placeholder="{% trans %}Your first name{% endtrans %}" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt; &lt;label&gt;{% trans %}Last name{% endtrans %}&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="lastname" placeholder="{% trans %}Your last name{% endtrans %}" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt; &lt;td&gt; &lt;label&gt;{% trans %}Address{% endtrans %}&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="address" placeholder="{% trans %}Your address{% endtrans %}" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt; &lt;label&gt;{% trans %}Zip code{% endtrans %}&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="zipcode" placeholder="{% trans %}Your zip code{% endtrans %}" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt; &lt;label&gt;{% trans %}City{% endtrans %}&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="city" placeholder="{% trans %}City{% endtrans %}" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt; &lt;label&gt;{% trans %}Phone{% endtrans %}&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="phone" placeholder="{% trans %}Your phone number{% endtrans %}" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; &lt;button&gt;{% trans %}Next{% endtrans %}&lt;/button&gt; &lt;/form&gt;&lt;img src="/welcome/static/images/snabbreg002.jpg"&gt;&lt;/div&gt; &lt;/html&gt; </code></pre> <p>And my CSS is</p> <pre><code>BODY {background-image: url(/welcome/static/images/reg-bg.png); background-repeat: repeat-x; } #content { width: 700px ; margin-left: auto ; margin-right: auto ; } </code></pre> <p>Could you advice how to align my components more to the right like in the lower picture?</p> <p>Thank you</p> <h2>Update</h2> <p>Now I could align the logo to the right, all that is left to be done is moving the form to the right. How do I do it?</p> <p><img src="https://i.stack.imgur.com/EJ4Jy.png" alt="enter image description here"></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload