user1550052 user1550052 - 3 months ago 7
CSS Question

CSS positioning and gradient coverage

I'm trying to have content ("I want this below the form") below my form, as you can see by this snippet, it places it to the left.



/*custom font*/

@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/

* {
margin: 0;
padding: 0;
}
html {
height: 100%;
/*Image only BG fallback*/
background: url('http://qases.emsreg.com/Main/images/survey_bg/gs.png');
/*background = gradient + image pattern combo*/
background: linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('http://qases.emsreg.com/Main/images/survey_bg/gs.png');
}
body {
font-family: montserrat, arial, verdana;
background-color: transparent !important;
}
/*form styles*/

#msform {
width: 480px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: absolute;
}
/*Hide all except first fieldset*/

#msform fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/

#msform input,
#msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/

#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover,
#msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/

.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/

#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
/* width should be 100 divided by the number of steps */
/* this is set in the code dynamically in javascript */
width: 25%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/

#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
/*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/

/*The number of the step and the connector before it = green*/

#progressbar li.active:before,
#progressbar li.active:after {
background: #27AE60;
color: white;
}
.rbContainer {
white-space: nowrap;
text-align: center;
}
.rbContainerN {
white-space: nowrap;
text-align: center;
margin-left: -50px;
}
.rbContainerL {
white-space: nowrap;
float: left;
}
.rbContainerR {
white-space: nowrap;
float: right;
}
.lblY {
float: left;
}
.inY {
float: left;
}

<body>

<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Step 0</li>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">What are the Event Details</h2>
<h3 class="fs-subtitle">Step 1</h3> Event Name
<input type="text" name="eventName" placeholder="EventName" />
<label>Start&nbsp;</label>
<input id="datepickerStart" value="" name="datepickerStart" style="width: 80%" />
<br />
<label>End&nbsp;&nbsp;&nbsp;</label>
<input id="datepickerEnd" value="" name="datepickerEnd" style="width: 80%" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>

<fieldset>
<h2 class="fs-title">Configure your Event</h2>
<h3 class="fs-subtitle">Step 2</h3>

<label for="hasB">Booth Staff</label>
<input id="hasB" type="checkbox" name="hasBoothStaff" checked="checked" />Exhibitors
<input type="checkbox" name="hasExhibitors" checked="checked" />

<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>

<fieldset>
<h2 class="fs-title">Choose your Data Fields</h2>
<h3 class="fs-subtitle">Step 3</h3>

<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>

<fieldset>
<h2 class="fs-title">Booth and Staff Badges</h2>
<h3 class="fs-subtitle">Step 4</h3>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Allocate</h2>
<h3 class="fs-subtitle">Step 5</h3>

<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Exhibitors</h2>
<h3 class="fs-subtitle">Step 6</h3>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Setup Exhibitor Admin Portal</h2>
<h3 class="fs-subtitle">Step 7</h3>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="submit" class="next action-button" id="submitBtn" value="Submit" />
<!-- <input type="submit" name="submit" class="submit action-button" value="Submit" /> -->
</fieldset>
</form>
<div>
<p>

I want this below the form
</p>
</div>



</body>





In another snippet below, when I have more content in the form, I can't even get a margin below it, let alone any content. Also, in the largeer form the gradient does not flow to the end of the page.



/*custom font*/

@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/

* {
margin: 0;
padding: 0;
}

html {
height: 100%;
/*Image only BG fallback*/
background: url('http://qases.emsreg.com/Main/images/survey_bg/gs.png');
/*background = gradient + image pattern combo*/
background: linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('http://qases.emsreg.com/Main/images/survey_bg/gs.png');
}

body {
font-family: montserrat, arial, verdana;
background-color: transparent !important;
}


/*form styles*/

#msform {
width: 480px;
margin: 50px auto;
text-align: center;
position: relative;
}

#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: absolute;
}


/*Hide all except first fieldset*/

#msform fieldset:not(:first-of-type) {
display: none;
}


/*inputs*/

#msform input,
#msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}


/*buttons*/

#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}

#msform .action-button:hover,
#msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}


/*headings*/

.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}

.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}


/*progressbar*/

#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}

#progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
/* width should be 100 divided by the number of steps */
/* this is set in the code dynamically in javascript */
width: 25%;
float: left;
position: relative;
}

#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}


/*progressbar connectors*/

#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
/*put it behind the numbers*/
}

#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}


/*marking active/completed steps green*/


/*The number of the step and the connector before it = green*/

#progressbar li.active:before,
#progressbar li.active:after {
background: #27AE60;
color: white;
}

.rbContainer {
white-space: nowrap;
text-align: center;
}

.rbContainerN {
white-space: nowrap;
text-align: center;
margin-left: -50px;
}

.rbContainerL {
white-space: nowrap;
float: left;
}

.rbContainerR {
white-space: nowrap;
float: right;
}

.lblY {
float: left;
}

.inY {
float: left;
}

<body>

<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Step 0</li>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">What are the Event Details</h2>
<h3 class="fs-subtitle">Step 1</h3> Event Name

<input type="text" name="eventName" placeholder="EventName" />
<label>Start&nbsp;</label>
<input id="datepickerStart" value="" name="datepickerStart" style="width: 80%" />
<br />
<label>End&nbsp;&nbsp;&nbsp;</label>
<input id="datepickerEnd" value="" name="datepickerEnd" style="width: 80%" />

<input type="text" name="eventName" placeholder="EventName" />
<label>Start&nbsp;</label>
<input id="datepickerStart2" value="" name="datepickerStart" style="width: 80%" />
<br />
<label>End&nbsp;&nbsp;&nbsp;</label>
<input id="datepickerEnd2" value="" name="datepickerEnd" style="width: 80%" />

<input type="text" name="eventName" placeholder="EventName" />
<label>Start&nbsp;</label>
<input id="datepickerStart3" value="" name="datepickerStart" style="width: 80%" />
<br />
<label>End&nbsp;&nbsp;&nbsp;</label>
<input id="datepickerEnd3" value="" name="datepickerEnd" style="width: 80%" />
<br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>

<fieldset>
<h2 class="fs-title">Configure your Event</h2>
<h3 class="fs-subtitle">Step 2</h3>

<label for="hasB">Booth Staff</label>
<input id="hasB" type="checkbox" name="hasBoothStaff" checked="checked" /> Exhibitors
<input type="checkbox" name="hasExhibitors" checked="checked" />

<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>

<fieldset>
<h2 class="fs-title">Choose your Data Fields</h2>
<h3 class="fs-subtitle">Step 3</h3>

<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>

<fieldset>
<h2 class="fs-title">Booth and Staff Badges</h2>
<h3 class="fs-subtitle">Step 4</h3>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Allocate</h2>
<h3 class="fs-subtitle">Step 5</h3>

<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Exhibitors</h2>
<h3 class="fs-subtitle">Step 6</h3>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Setup Exhibitor Admin Portal</h2>
<h3 class="fs-subtitle">Step 7</h3>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="submit" class="next action-button" id="submitBtn" value="Submit" />
<!-- <input type="submit" name="submit" class="submit action-button" value="Submit" /> -->
</fieldset>
</form>

<div>
<p>

I want this below the form
</p>
</div>


</body>





Any help would be awesome.

PS: The example isn't functional but it illustrates the css issue I am having.

Answer

I believe min-height(HTML), without absolute(fieldset) should do, unless i missunderstood you:

/*custom font*/

@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/

* {
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
  /*Image only BG fallback*/
  background: url('http://qases.emsreg.com/Main/images/survey_bg/gs.png');
  /*background = gradient + image pattern combo*/
  background: linear-gradient( to bottom, rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('http://qases.emsreg.com/Main/images/survey_bg/gs.png');

}

body {
  font-family: montserrat, arial, verdana;
  background-color: transparent !important;
}


/*form styles*/

#msform {
  width: 480px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}

#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;
  box-sizing: border-box;
  width: 80%;
  margin: 0 10%;/* margin:0 auto works fine too */
  /*stacking fieldsets above each other*/
}


/*Hide all except first fieldset*/

#msform fieldset:not(:first-of-type) {
  display: none;
}


/*inputs*/

#msform input,
#msform textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 13px;
}


/*buttons*/

#msform .action-button {
  width: 100px;
  background: #27AE60;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 1px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
}

#msform .action-button:hover,
#msform .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}


/*headings*/

.fs-title {
  font-size: 15px;
  text-transform: uppercase;
  color: #2C3E50;
  margin-bottom: 10px;
}

.fs-subtitle {
  font-weight: normal;
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}


/*progressbar*/

#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  /*CSS counters to number the steps*/
  counter-reset: step;
}

#progressbar li {
  list-style-type: none;
  color: white;
  text-transform: uppercase;
  font-size: 9px;
  /* width should be 100 divided by the number of steps */
  /* this is set in the code dynamically in javascript */
  width: 25%;
  float: left;
  position: relative;
}

#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 20px;
  line-height: 20px;
  display: block;
  font-size: 10px;
  color: #333;
  background: white;
  border-radius: 3px;
  margin: 0 auto 5px auto;
}


/*progressbar connectors*/

#progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: white;
  position: absolute;
  left: -50%;
  top: 9px;
  z-index: -1;
  /*put it behind the numbers*/
}

#progressbar li:first-child:after {
  /*connector not needed before the first step*/
  content: none;
}


/*marking active/completed steps green*/


/*The number of the step and the connector before it = green*/

#progressbar li.active:before,
#progressbar li.active:after {
  background: #27AE60;
  color: white;
}

.rbContainer {
  white-space: nowrap;
  text-align: center;
}

.rbContainerN {
  white-space: nowrap;
  text-align: center;
  margin-left: -50px;
}

.rbContainerL {
  white-space: nowrap;
  float: left;
}

.rbContainerR {
  white-space: nowrap;
  float: right;
}

.lblY {
  float: left;
}

.inY {
  float: left;
}
<body>

  <!-- multistep form -->
  <form id="msform">
    <!-- progressbar -->
    <ul id="progressbar">
      <li class="active">Step 0</li>
      <li>Step 1</li>
      <li>Step 2</li>
      <li>Step 3</li>
    </ul>
    <!-- fieldsets -->
    <fieldset>
      <h2 class="fs-title">What are the Event Details</h2>
      <h3 class="fs-subtitle">Step 1</h3> Event Name
      
      <input type="text" name="eventName" placeholder="EventName" />
      <label>Start&nbsp;</label>
      <input id="datepickerStart" value="" name="datepickerStart" style="width: 80%" />
      <br />
      <label>End&nbsp;&nbsp;&nbsp;</label>
      <input id="datepickerEnd" value="" name="datepickerEnd" style="width: 80%" />
      
      <input type="text" name="eventName" placeholder="EventName" />
      <label>Start&nbsp;</label>
      <input id="datepickerStart2" value="" name="datepickerStart" style="width: 80%" />
      <br />
      <label>End&nbsp;&nbsp;&nbsp;</label>
      <input id="datepickerEnd2" value="" name="datepickerEnd" style="width: 80%" />
      
      <input type="text" name="eventName" placeholder="EventName" />
      <label>Start&nbsp;</label>
      <input id="datepickerStart3" value="" name="datepickerStart" style="width: 80%" />
      <br />
      <label>End&nbsp;&nbsp;&nbsp;</label>
      <input id="datepickerEnd3" value="" name="datepickerEnd" style="width: 80%" />      
      <br /> <br /> <br /> <br /> 
      <br /> <br /> <br /> <br /> 
      <br /> <br /> <br /> <br /> 
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>

    <fieldset>
      <h2 class="fs-title">Configure your Event</h2>
      <h3 class="fs-subtitle">Step 2</h3>

      <label for="hasB">Booth Staff</label>
      <input id="hasB" type="checkbox" name="hasBoothStaff" checked="checked" /> Exhibitors
      <input type="checkbox" name="hasExhibitors" checked="checked" />

      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>

    <fieldset>
      <h2 class="fs-title">Choose your Data Fields</h2>
      <h3 class="fs-subtitle">Step 3</h3>

      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>

    <fieldset>
      <h2 class="fs-title">Booth and Staff Badges</h2>
      <h3 class="fs-subtitle">Step 4</h3>
      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
      <h2 class="fs-title">Allocate</h2>
      <h3 class="fs-subtitle">Step 5</h3>

      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
      <h2 class="fs-title">Exhibitors</h2>
      <h3 class="fs-subtitle">Step 6</h3>
      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
      <h2 class="fs-title">Setup Exhibitor Admin Portal</h2>
      <h3 class="fs-subtitle">Step 7</h3>
      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="submit" class="next action-button" id="submitBtn" value="Submit" />
      <!-- <input type="submit" name="submit" class="submit action-button"  value="Submit" /> 		 -->
    </fieldset>
  </form>

<div>
<p>

I want this below the form
</p>
</div>


</body>