How to Format Page In Css

Question

I have this code

.form-horizontal {
  display: block;
  width: 50%;
  margin: 0 auto;
}

%transition {
  transition: background .35s ease;
}


/*Base*/

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #eecda3 0%, #ef629f 100%);
}


/*Typography*/

html {
  font: 16px Verdana;
}

h1 {
  font-size: 1.2em;
}

li {
  font-size: 1em;
}


/*Layout*/


/*Dropdown*/

.dropdown {
  margin: 2em auto;
  width: 14.5em;
  border: .1em solid #c0cdd1;
}

a {
  display: block;
  padding: .5em;
  color: #000;
  text-decoration: none;
  @extend %transition;
  &:focus,
  &:hover {
    background: #ecf0f1;
  }
  &:active {
    background: #fbfcfc;
  }
}

.da {
  float: right
}


/*List*/

ul {
  display: none;
  border-top: .1em solid #c0cdd1;
}

li {
  padding: .5em;
  cursor: pointer;
  @extend %transition;
  &:not(:first-child) {
    border-top: .1em dashed #dde4e6;
  }
  &:last-child {
    color: #ad0000;
  }
  &:focus,
  &:hover {
    background: #ecf0f1;
  }
  &:active {
    background: #fbfcfc;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<form class="form-horizontal">

  <center>
    <h4>Start Tracking A Product </h4>
  </center>
  <center>
    <p>* = required</p>
  </center>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We Will Notify This Email When The Target Price Is Reached.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Target Price</label>
    <input type="number" class="form-control" id="exampleInputPassword1" placeholder="Ex: 250">
  </div>

  <center><button type="submit" class="btn btn-primary">     Start Track    </button></center>
</form>

You can also run it on codepen https://codepen.io/sochum/pen/mdLKqPP

And I would like to put the form inside a white block that goes vertically. I want the background color to only be on the parts outside of the white block.

How would I put the form inside a div like that?

Example Of What I Am trying to do

Answer 1

I am not sure if this is what you are looking for but you could simply enhance your .form-horizontal class to be like this:

.form-horizontal {
  display: block;
  width: 50%;
  margin: 0 auto;
  background-color: white; /* new */
  padding: 2em;            /* new */
  height: 100%;            /* new */
}

See demo code below

.form-horizontal {
  display: block;
  width: 50%;
  margin: 0 auto;
  background-color: white;
  padding: 2em;
  height: 100%;
}

%transition {
  transition: background .35s ease;
}


/*Base*/

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #eecda3 0%, #ef629f 100%);
}


/*Typography*/

html {
  font: 16px Verdana;
}

h1 {
  font-size: 1.2em;
}

li {
  font-size: 1em;
}


/*Layout*/


/*Dropdown*/

.dropdown {
  margin: 2em auto;
  width: 14.5em;
  border: .1em solid #c0cdd1;
}

a {
  display: block;
  padding: .5em;
  color: #000;
  text-decoration: none;
  @extend %transition;
  &:focus,
  &:hover {
    background: #ecf0f1;
  }
  &:active {
    background: #fbfcfc;
  }
}

.da {
  float: right
}


/*List*/

ul {
  display: none;
  border-top: .1em solid #c0cdd1;
}

li {
  padding: .5em;
  cursor: pointer;
  @extend %transition;
  &:not(:first-child) {
    border-top: .1em dashed #dde4e6;
  }
  &:last-child {
    color: #ad0000;
  }
  &:focus,
  &:hover {
    background: #ecf0f1;
  }
  &:active {
    background: #fbfcfc;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<form class="form-horizontal">

  <center>
    <h4>Start Tracking A Product </h4>
  </center>
  <center>
    <p>* = required</p>
  </center>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We Will Notify This Email When The Target Price Is Reached.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Target Price</label>
    <input type="number" class="form-control" id="exampleInputPassword1" placeholder="Ex: 250">
  </div>

  <center><button type="submit" class="btn btn-primary">     Start Track    </button></center>
</form>