CODEWITHSUNDEEP
htmlcsslayout
CatoTheYounger
CatoTheYounger

Reputation: 25

Tuning up the Box Model layout

I'm trying to center the table in the following code so its NOT hugging the left border wall. I cant seem to pinpoint the problem. As of right now the table in column 2 floats off to the left and touches the left wall of the border. I need it to be more centered in the box. Any help? I need the table to look like this: 1.

   header {
    text-align: center;
    font-size: 30px;
    font-style: bold;
    font-style: italic;
  }
  
  #column-1 {
    float: left;
    background-color: lightblue;
    width: 25%;
    border: 5px solid red;
    padding: 20px;
    margin: 2px;
    height: 400px
  }
  
  #column-2 {
    background-color: lightblue;
    width: 100%;
    border: 5px solid red;
    padding: 20px;
    margin: 2px;
    text-align: center;
    height: 400px
<!DOCTYPE html>
<html>

  <head>
    <title>Logans Dinner</title>
  </head>

  <body>
    <header>Welcome to Logans Dinner</header>
    <div id='column-1'>
      <nav>
        <ul>
          <li><a href='/Menu.html'>Menu</a></li>
          <li><a href='/About.html'>About Us</a></li>
          <li><a href='/Contact.html'>Contact Us</a></li>
        </ul>
      </nav>
  </header>
  </div>
  <div id='column-2'>
    <section>
      <p>Our Menu</p>
      <table>
        <thead>
          <tr>
            <th>Food</th>
            <th>Description</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Burger</td>
            <td>1/2 lb Angus Beef</td>
            <td>$10.99</td>
          </tr>
        </tbody>
      </table>
  </div>

  </section>
  </body>

</html>

Upvotes: 1

Views: 74

Answers (2)

S. Mayol
S. Mayol

Reputation: 2625

      header {
        text-align: center;
        font-size: 30px;
        font-style: bold;
        font-style: italic;
        height: 50px
      }

      #column-1 {
        float: left;
        background-color: lightblue;
        width: 25%;
        border: 5px solid red;
        padding: 20px;
        margin: 2px;
        height: 400px
      }

      #column-2 {
        background-color: lightblue;
        width: 100%;
        border: 5px solid red;
        padding: 20px;
        margin: 2px;
        text-align: center;
        height: 400px 
      }
      
      p {
        font-size: 150%;
        font-weight: bold;
      }

      table {
        margin: 0 auto;
      }

      table, th, td {
        border: 2px solid black;
        border-collapse: collapse;
      }
      td {
        padding: 15px;
      }

      /*This CSS class provide you striped rows on the table*/ 
      
      .table-striped thead tr:first-child th {
        background-color: #FF0000;
      }
      
      .table-striped tbody tr:nth-child(odd) td {
        background-color: #81DAF5;
      }

      .table-striped tbody tr:nth-child(even) td {
        background-color: #CEECF5;
      }
<!DOCTYPE html>
<html>
  <head>
    <title>Logans Dinner</title>
  </head>
  
  <body>
    <header>Welcome to Logans Dinner</header>
    <div id='column-1'>
      <nav>
        <ul>
          <li><a href='/Menu.html'>Menu</a></li>
          <li><a href='/About.html'>About Us</a></li>
          <li><a href='/Contact.html'>Contact Us</a></li>
        </ul>
      </nav>
    </div>
    <div id='column-2'>
      <section>
        <p>Our Menu</p>
        <table class="table-striped">
           <thead>
            <tr>
              <th>Food</th>
              <th>Description</th>
              <th>Price</th>
            </tr>
          </thead>
          
          <tbody>
            <tr>
              <td>Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$10.99</td>
            </tr>
            <tr>
              <td>Cheese Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$12.99</td>
            </tr>
            <tr>
              <td>Burger with fries</td>
              <td>1/2 lb Angus Beef</td>
              <td>$15.89</td>
            </tr>
            <tr>
              <td>Double Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$19.89</td>
            </tr>
            <tr>
              <td>Chicken Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$11.75</td>
            </tr>
            <tr>
              <td>Black Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$13.50</td>
            </tr>
           
          </tbody>
          
        </table>
        </div>
      </section>
  </body>

</html>

I am going to provide you a code that I create based on the image as example that you provided. I hope this helps you. I put the CSS code in the html document. If you have them in separate files you can cut the CSS code and put it in you .css file.

<!DOCTYPE html>
<html>
  <head>
    <title>Logans Dinner</title>

    <style>

      /* The CSS code in order to format the table */
      header {
        text-align: center;
        font-size: 30px;
        font-style: bold;
        font-style: italic;
        height: 50px
      }

      #column-1 {
        float: left;
        background-color: lightblue;
        width: 25%;
        border: 5px solid red;
        padding: 20px;
        margin: 2px;
        height: 400px
      }

      #column-2 {
        background-color: lightblue;
        width: 100%;
        border: 5px solid red;
        padding: 20px;
        margin: 2px;
        text-align: center;
        height: 400px 
      }

      p {
        font-size: 150%;
        font-weight: bold;
      }

      table {
        margin: 0 auto;
      }

      table, th, td {
        border: 2px solid black;
        border-collapse: collapse;
      }
      td {
        padding: 15px;
      }

      /*This CSS class provide you striped rows on the table*/ 

      .table-striped thead tr:first-child th {
        background-color: #FF0000;
      }

      .table-striped tbody tr:nth-child(odd) td {
        background-color: #81DAF5;
      }

      .table-striped tbody tr:nth-child(even) td {
        background-color: #CEECF5;
      }

    </style>

  </head>

  <body>
    <header>Welcome to Logans Dinner</header>
    <div id='column-1'>
      <nav>
        <ul>
          <li><a href='/Menu.html'>Menu</a></li>
          <li><a href='/About.html'>About Us</a></li>
          <li><a href='/Contact.html'>Contact Us</a></li>
        </ul>
      </nav>
    </div>
    <div id='column-2'>
      <section>
        <p>Our Menu</p>
        <table class="table-striped">
           <thead>
            <tr>
              <th>Food</th>
              <th>Description</th>
              <th>Price</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$10.99</td>
            </tr>
            <tr>
              <td>Cheese Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$12.99</td>
            </tr>
            <tr>
              <td>Burger with fries</td>
              <td>1/2 lb Angus Beef</td>
              <td>$15.89</td>
            </tr>
            <tr>
              <td>Double Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$19.89</td>
            </tr>
            <tr>
              <td>Chicken Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$11.75</td>
            </tr>
            <tr>
              <td>Black Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$13.50</td>
            </tr>

          </tbody>

        </table>
        </div>
      </section>
  </body>

</html>

Upvotes: 0

Jon Uleis
Jon Uleis

Reputation: 18649

You can use the rule margin: 0 auto to center your table. This is shorthand for:
margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;

Additionally, I noticed you had some mismatched HTML tags (like an early </body> and an extra </header>). Make sure your opening and closing tags are properly paired and in the right places.

header {
  text-align: center;
  font-size: 30px;
  font-style: bold;
  font-style: italic;
}

#column-1 {
  float: left;
  background-color: lightblue;
  width: 25%;
  border: 5px solid red;
  padding: 20px;
  margin: 2px;
  height: 400px
}

#column-2 {
  background-color: lightblue;
  width: 100%;
  border: 5px solid red;
  padding: 20px;
  margin: 2px;
  text-align: center;
  height: 400px
}

table {
  margin: 0 auto;
}
<header>Welcome to Logans Dinner</header>
<div id='column-1'>
  <nav>
    <ul>
      <li><a href='/Menu.html'>Menu</a></li>
      <li><a href='/About.html'>About Us</a></li>
      <li><a href='/Contact.html'>Contact Us</a></li>
    </ul>
  </nav>
</div>
<div id='column-2'>
  <section>
    <p>Our Menu</p>
    <table>
      <thead>
        <tr>
          <th>Food</th>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Burger</td>
          <td>1/2 lb Angus Beef</td>
          <td>$10.99</td>
        </tr>
      </tbody>
    </table>
</div>

</section>

Upvotes: 1

Related Questions