Catherine Catherine - 5 months ago 17
CSS Question

aligning elements in their containers and the containers on the line

I've got several elements that I am trying to group together and then center them on page like so:

|
|
Username: |
________________ | IMG 1
Password: |
________________ | IMG 2
login |
|
|


I don't want Username and password centered, I still want to those to be at the very left side of the input boxes.

Right now it looks something like this:

|
Username IM|G 2
|
_______________ | IMG 1
_______________ Pass|word:
|
login |
|
|


I've got IMG 1, the login button and the vertical line in a good spot but the form is just all over the place. I've tried playing around with a lot of different things to get the rest of the login form and IMG 2 in the right spot but I am stuck. Here is the basic layout of my html file:

<div id="center-wrapper">
<div id="img1">
<img src="img1.png" />
</div>
<br>
<div id="img2">
<img src="img2.png" />
</div>

<div id="line"></div>

<form id="form-wrapper" action="/login/" method="post" style="width:40%;">
{% csrf_token %}
{% for field in form %}
<br>
{% if field.errors %}
<div class="form-group has-error">
<label class="col-sm-2 control-label" for="id_{{ field.name }}">
{{ field.label }}</label>
<div class="col-sm-10">
{{ field|attr:"class:form-control" }}
<span class="help-block">
{% for error in field.errors %}{{ error }}{% endfor %}
</span>
</div>
</div>
{% else %}
<div class="form-group">
<label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label>
<div class="col-sm-10">
{{ field|attr:"class:form-control" }}
{% if field.help_text %}
<p class="help-block"><small>{{ field.help_text }}</small></p>
{% endif %}
</div>
</div>
{% endif %}
<br>
{% endfor %}
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<br>
<button type="submit" class="btn btn-primary" value="Log In">{% trans "Log In" %}</button><br>
<br>Don't have an account? <a href="/signup/">Sign Up</a>
</div>
</div>
</form>
</div>


My button is inside my form so I am not sure why that one is being centered properly and the rest of the form is not. Also, the
<br>
is not putting IMG 2 under IMG 1. My CSS is this:

#center-wrapper {
text-align: center;
margin: auto;
width: 60%;
height: 100%;
}

#form-wrapper {
width: 50%;
}

#img1 {
height: 220px;
width: 274px;
background: none;
z-index: 30;
float: right;
position: absolute;
margin-top: 0;
}

#img2 {
height: 85px;
width: 274px;
background: none;
z-index: 30;
float: right;
position: absolute;
margin-bottom: 0;
}

#line {
height: 305px;
width: 2px;
background-color: #8a8a8a;
top: 200px;
left: 50%;
z-index: 30;
position: absolute;
}


I don't think my question is very hard, but I have been struggling over getting this format right for so long and I just want some suggestions! I am using Django forms, which are pretty tricky to format (formatting them with widget-tweaks), but I don't think that should matter for moving its position around.

Answer

Please avoid the use of absolute positions for this kind of layouts that will break your view at some point.

I suggest the use of other CSS methods. Check this snippet examples if you have more questions you can ask:

Display - Table

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
html,
body {
  height: 100%;
}
#center-wrapper {
  height: 100%;
  width: 100%;
  display: table;
}
#center-wrapper > div {
  width: 50%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
#center-wrapper > div:first-child {
  border-right: 2px solid red;
}
#form-wrapper {
  width: 70%;
  display: inline-block;
}
label,
input {
  width: 100%;
  text-align: left;
  display: block;
}
<div id="center-wrapper">
  <div>
    <form id="form-wrapper">
      <label>User</label>
      <input type="text">
      <label>Pass</label>
      <input type="text">
      <button type="submit" value="Log In">Log In</button>
    </form>
  </div>
  <div>
    <img src="http://placehold.it/200" />
    <img src="http://placehold.it/200" />
  </div>
</div>


Inline-block

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
html,
body {
  height: 100%;
}
#center-wrapper {
  height: 100%;
  width: 100%;
}
#center-wrapper > div {
  width: 48%;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
#center-wrapper > div.line {
  width:2%;
  height:100%;
  background:purple;
}
#form-wrapper {
  width: 70%;
  display: inline-block;
}
label,
input {
  width: 100%;
  text-align: left;
  display: block;
}
<div id="center-wrapper">
  <div>
    <form id="form-wrapper">
      <label>User</label>
      <input type="text">
      <label>Pass</label>
      <input type="text">
      <button type="submit" value="Log In">Log In</button>
    </form>
  </div>
  <div class="line"></div>
  <div>
    <img src="http://placehold.it/200" />
    <img src="http://placehold.it/200" />
  </div>
</div>


Note : Other methods like flex will work also, but this here will give you an idea