HTML Structuring layout issue

Question

I have some troubles with my html and css structure for this layout on the picture below.

Can you give me some suggestions how to accomplish it properly ? How to separate left section and right section with the form because I want to be able to create this full height black transparent background ?

Here is my code until now.

.enroll-bg { background: linear-gradient(  rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.52)), url(https://s30.postimg.org/6uy1f1rxd/enroll_bg.jpg) 0 0 no-repeat; background-size: cover; padding: 40px 0 230px 0; width: 100%; }

.form-container { position: relative; }
.form-wrapper { position: absolute; bottom: -230px; right: 0; left: 50%;  background: red;  width: 539px; height: 520px; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="header">
  <div class="enroll-bg">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="enroll-logo">
            <div class="logo">
              <a href="#">logo</a>
            </div>
            <!-- logo -->
          </div>
          <!-- enroll-logo -->
          <div class="enroll-content">
            <h1>Enroll today and <span>save money &amp; time</span></h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.Com sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
          </div>
          <!-- enroll-content -->
        </div>
        <!-- col-md-6 -->
      </div>
      <!-- row -->
      <div class="form-container">
        <form action="#" class="form-wrapper">
          <div class="form-content">
            <p>
              <input type="text" id="fname" name="firstname" placeholder="Full Name..." required="required" class="field">
            </p>
            <p>
              <input type="text" id="fname" name="firstname" placeholder="+44 01 234 5678" required="required" class="field">
            </p>
            <p>
              <input type="email" id="email" name="email" placeholder="Email Address..." required="required" class="field">
            </p>
            <p>
              <input type="email" id="confirm-email" name="confirm-email" placeholder="Confirm Email..." required="required" class="field">
            </p>
            <p>
              <input type="text" id="electric-provider" name="electric-provider" placeholder="Current Electric Provider..." required="required" class="field">
            </p>
            <p>
              <input type="text" id="gas-provider" name="gas-provider" placeholder="Current Gas Provider..." required="required" class="field">
            </p>
            <div class="form-actions">
              <button type="button" class="btn btn-danger">enroll today</button>
            </div>
            <!-- form-actions -->
          </div>
          <!-- form-content -->
        </form>
        <!-- form-wrapper -->
      </div>
      <!-- form-container -->
    </div>
    <!-- container -->
  </div>
  <!-- enroll-bg -->
</header>
<!-- header -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Ryan Gee · Accepted Answer · 2016-12-11 11:03:18Z

I've made some minor tweaks to both HTML and CSS - see jsfiddle here.

I've removed position: absolute from the .form-wrapper, wrapped the form in a .col-xs-6, and put in the same .row so that it sits alongside the enroll content.

Each .row can contain any combination of .col-xx-xx or .col-xx-offset-xx, as long as the sum of the numbers is no more than 12. You can read more about this here.

HTML:

<div class="enroll-bg">
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <div class="enroll-logo">
                    <div class="logo">
                        <a href="#">logo</a>
                    </div>
                </div>
                <div class="enroll-content">
                    <h1>Enroll today and <span>save money &amp; time</span></h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.Com sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                </div>
            </div>
            <div class="col-xs-6 form-container">
                <div class="">
                    <form action="#" class="form-wrapper">
                        <div class="form-content">
                            <p>
                                <input type="text" id="fname" name="firstname" placeholder="Full Name..." required="required" class="field">
                            </p>
                            <p>
                                <input type="text" id="fname" name="firstname" placeholder="+44 01 234 5678" required="required" class="field">
                            </p>
                            <p>
                                <input type="email" id="email" name="email" placeholder="Email Address..." required="required" class="field">
                            </p>
                            <p>
                                <input type="email" id="confirm-email" name="confirm-email" placeholder="Confirm Email..." required="required" class="field">
                            </p>
                            <p>
                                <input type="text" id="electric-provider" name="electric-provider" placeholder="Current Electric Provider..." required="required" class="field">
                            </p>
                            <p>
                                <input type="text" id="gas-provider" name="gas-provider" placeholder="Current Gas Provider..." required="required" class="field">
                            </p>
                            <div class="form-actions">
                                <button type="button" class="btn btn-danger">enroll today</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

.enroll-bg { background: linear-gradient(  rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.52)), url(https://s30.postimg.org/6uy1f1rxd/enroll_bg.jpg) 0 0 no-repeat; 
background-size: cover; 
width: 100%; }


.form-container {
  height: 100vh;
  background: red;
}

Ryan Gee · Accepted Answer · 2016-12-11 12:08:26Z

1

Your form must be in the same row as the left column, and in another col-md-6.

edited Dec 11, 2016 at 12:08

Ryan Gee

4042 silver badges9 bronze badges

answered Dec 11, 2016 at 10:48

grogro

5955 silver badges8 bronze badges

Comments

G-Cyrillus · Accepted Answer · 2016-12-11 12:27:16Z

if it is for a single page you may not need to use boostrap (class and structure) and relay on the flex model with a few mediaqueries to allow font-size resizing and eventually break into 1 column:

header,
main {
  width: 30vw;
  min-width: 360px;
  height: 100vh;
}
html,
header,
form {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
body {
  min-height: 100vh;
  margin:0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: linear-gradient(to bottom, #55707B, #677B82, #484926, #685125);
  background-size:100% 100%;
  color: white;
}
header img {
  min-height: 40px;
  margin: 1em auto 1em 1em;
}
header h1 {
  flex: 1;
  display: flex;
  flex-flow: column;
  justify-content: center;
  font-size: 3.5em;
  margin: 0;
}
header h1 b {
  display: block;
  color: #A7FE2B
}
main form {
  justify-content: space-around;
  align-items: center;
  padding: 5vh 3vw;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.25)
}
main form label {
  font-size: 5vh;
  width: 100%;
  position: relative;
}
main form label input:not([type="submit"]) {
  width: 100%;
  padding-left: 1.5em;
  box-sizing: border-box;
}
label:not(:last-of-type):before {
  font-family: FontAwesome;
  content: "\f007";
  position: absolute;
  z-index: 1;
  left: 0.2em;
  top: 0.25em;
  color: gray;
}
label:nth-child(2):before {
  content: "\f10b";
  /* etc ..*/
}
label:last-of-type input {
  padding: 0.25em;
  color: white;
  background: turquoise;
  border: none;
}
@media only screen and (max-height: 500px) {
  header h1 {
    font-size: 20px;
  }
  main form label {
    font-size: 20px;
  }
  body,
  main,
  header,
  form {
    height: auto;
    min-height: 100vh
  }
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<header>
  <img src="http://dummyimage.com/150x40&text=\LOGO/" alt="logo" />
  <h1>HTML Ipsum  Vestibulum &<b> test me full page too</b></h1>
  <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum,
    elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</header>
<main>
  <form>
    <label>
      <input placeholder="place holder" />
    </label>
    <label>
      <input placeholder="place holder" />
    </label>
    <label>
      <input placeholder="place holder" />
    </label>
    <label>
      <input placeholder="place holder" />
    </label>
    <label>
      <input placeholder="place holder" />
    </label>
    <label>
      <input placeholder="place holder" />
    </label>
    <label>
      <input type="submit" value="tempus lacus" />
    </label>

  </form>
</main>

http://codepen.io/gc-nomade/pen/MbBNaO

Collectives™ on Stack Overflow

HTML Structuring layout issue

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related