Catherine Catherine - 1 year ago 47
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 Source

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