Split bootstrap form from results-CodePudding

I'm trying to make a simple web app using Bootstrap that takes a user's input on a form, send it to a database and then returns the data in a table below the form. The issue I'm having is more-so on the styling side. My goal is to have the 2 areas separated (see image for current setup and desired output).

I've researched solutions both on stack overflow and elsewhere and have tried those solutions but so far to no avail. I'm hoping that what I'm doing wrong is a simple thing (and I kind of feel like it is) and the solution is a very easy fix but I'm not sure.

Here's my HTML:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css"></script>
  </head>

  <body >
    <div >
        <h1 >Text Items</h1>
    </div>

    <div >
        <form onsubmit="postText()">
            <div >
              <label for="inputText">Text</label>
              <span><i ></i></span>
              <input type="text"  name="inputText" id="inputText" placeholder="Enter Text ...">
            </div>
  
            
            <div >
              <label for="inputDate">Date</label>
              <span><i ></i></span>
              <input type="date"  name="inputDate" id="inputDate">
            </div>
  
            <button type="submit"  id="submission">Submit <i  aria-hidden="true"></i></button>
            <button type="button"  id="update">Update <i  aria-hidden="true"></i></button>
            <button type="button"  id="clearUpdate" onclick="clearUpdateFields()">Clear <i  aria-hidden="true"></i></button>
        </form>
        
        <br>
        <div id="nothingExists"></div>
        <br>
        <button type="submit"  onclick="getTexts()">Get List <span><i ></i></span></button>
        <br>
        <br>
        <div>
          <table id="dataTable" >
            <thead>
              <th  onclick="sortTable(0)">Item</th>
              <th  onclick="sortTable(1)">Date</th>
              <th>Options</th>
            </thead>
          </table>
        </div>
    </div>
  </body>
</html>

(I opted to leave out the default bootstrap script/css calls just because I feel it can get a bit messy)

I've tried wrapping the form in its own <div> and then the nothingExists <div> and the data table in their own separate second <div> but also that didn't work. On top of that, when the table gets filled with the data, the white background stretches with the table (so ideally the second <div> would stretch with the data/would become a scrollable table).

Here's the CSS I've currently got setup:

html {
    height: 100vh;
    min-width: 600px;
    background-image: linear-gradient(130deg, #FFFFFF, #1C3F80);
    background-repeat: no-repeat;
    background-size: auto;
}
body {
    width: 850px;
    height: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 50px auto;
}

.container {
    width: 850px;
    height: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 50px auto;
    font-family: 'Raleway', sans-serif;
}

.logo {
    display: flex;
    margin: auto;
    flex-direction: column;
    max-width: 500px;
    padding: 1.5rem 0;
    align-items: center;
}


form {
    margin: 0px 10px 20px 10px;
}

.main {
    padding: 20px;
}

th {
    text-align: center;
}

td {
    background-color: white;
}

.mySortable {
    cursor: pointer;
}

This is the goal:

This is the current page:

I'm not sure how to split them into 2 separate divs. Like I said earlier, hopefully the solution is pretty simple. Thanks in advance.

CodePudding user response：

make form and table containers siblings with white background, and then use margin to distance them, and padding to arrange elements within, utilizing bootstrap's helpers (m-, p-) or adding your own

<!doctype html>
<html lang="en">

<head>
  <style>

  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>

<body >
  <div >
    <h1 >Text Items</h1>
  </div>

  <div >

    <form onsubmit="postText()" >
      <div >
        <label for="inputText">Text</label>
        <span><i ></i></span>
        <input type="text"  name="inputText" id="inputText" placeholder="Enter Text ...">
      </div>


      <div >
        <label for="inputDate">Date</label>
        <span><i ></i></span>
        <input type="date"  name="inputDate" id="inputDate">
      </div>

      <button type="submit"  id="submission">Submit <i  aria-hidden="true"></i></button>
      <button type="button"  id="update">Update <i  aria-hidden="true"></i></button>
      <button type="button"  id="clearUpdate" onclick="clearUpdateFields()">Clear <i  aria-hidden="true"></i></button>
    </form>




    <div id="nothingExists" >

      <button type="submit"  onclick="getTexts()">Get List <span><i ></i></span></button>
      <table id="dataTable" >
        <thead>
          <tr>
            <th  onclick="sortTable(0)">Item</th>
            <th  onclick="sortTable(1)">Date</th>
            <th>Options</th>
          </tr>
        </thead>

      </table>

    </div>
  </div>
</body>

</html>