How can I align inline paragraph elements better (without table)

user_13190035 0
Viewed 125

I am very new to web design and I would like help aligning p elements on a web page, just like Tab aligns things in a word processor. I have the following code:

.tiny-ps {
  display: block;
}

.big-ps {
  display: none;
}

div.summary-container {
  border: 2px ridge;
  width: 100%;
  font-weight: normal;
  background-color: #eaeaea;
}

p {
  font-family: Tahoma, Arial, Helvetica;
}

p.highlight {
  display: block;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

p.highlight:nth-of-type(odd) {
  background-color: #800000;
}

p.highlight:nth-of-type(even) {
  background-color: #800020;
}

@media screen and (min-width: 500px) {
  div.summary-container {
    margin: 10px 0px;
  }
  p {
    font-size: 12pt;
    margin-bottom: 5px;
    margin-top: 5px;
  }
  p.normal {
    display: inline;
    margin-right: 2%;
    font-size: 12pt;
  }
  p.highlight {
    display: block;
    margin: 2px 0px 2px 0px;
    font-size: 12pt;
  }
  .billName {
    display: block;
  }
  .Norm9 {
    font-size: 8pt;
  }
  .tiny-ps {
    display: none;
  }
  .big-ps {
    display: inline-block;
  }
}
<div class="summary-container">
    <p class="highlight">Address&nbsp;Correction: 3</p>
    <p class="highlight"><span class="tiny-ps">Exped/Cour NOT Sent-Shipping: 5</span><span class="big-ps">Expedited/Courier Orders NOT Sent to Shipping: 5</span></p>
    <p class="highlight"><span class="big-ps">Pickup Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Pickups Not Sent-Shipping: 1</span></p>
    <p class="highlight"><span class="big-ps">Liner Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Liners Not Sent-Shipping: 1</span></p>
    <p class="normal">Orders Shipped Today: 0</p>
    <p class="normal">Order&nbsp;Received: 14</p>
    <p class="normal">Payment&nbsp;Declined: 6</p>
    <p class="normal">Payment&nbsp;Authorized: 3</p>
    <p class="normal">Mgt&nbsp;Hold: 6</p>
    <p class="normal">Order&nbsp;Sent&nbsp;to&nbsp;Shipping: 3</p>
    <p class="normal">Pending&nbsp;Mgt&nbsp;Approval&nbsp;for&nbsp;PMT: 4</p>
    <p class="normal">HELP&nbsp;ME: 1</p>
    <p class="normal"><span class="big-ps">Expedited/Courier Orders Sent to Shipping: 2</span><span class="tiny-ps">Exped/Courier Sent to Shipping: 2</span></p>
  </div>

What I cannot seem to figure out is how to get the text in the paragraphs to line up with the text in the other paragraphs and how to get the numbers to line up with each other. I want to do this without having to use a table. I can change the markup a little and add class names, but I do not want to use a table. It would look something like this: how i want it

Can anybody help me with this? Thank you!

css html
5 Answers

You can use css 'display:inline-block' or 'display:inline-grid' and mention width.

.tiny-ps {
  display: block;
}

.big-ps {
  display: none;
}

div.summary-container {
  border: 2px ridge;
  width: 100%;
  font-weight: normal;
  background-color: #eaeaea;
}

p {
  font-family: Tahoma, Arial, Helvetica;
}

p.highlight {
  display: block;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

p.highlight:nth-of-type(odd) {
  background-color: #800000;
}

p.highlight:nth-of-type(even) {
  background-color: #800020;
}

p.normal {
    display: inline-grid;
    width: 30%;
    float: left;
    font-size: 11px;
}
<div class="summary-container">
    <p class="highlight">Address&nbsp;Correction: 3</p>
    <p class="highlight"><span class="tiny-ps">Exped/Cour NOT Sent-Shipping: 5</span><span class="big-ps">Expedited/Courier Orders NOT Sent to Shipping: 5</span></p>
    <p class="highlight"><span class="big-ps">Pickup Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Pickups Not Sent-Shipping: 1</span></p>
    <p class="highlight"><span class="big-ps">Liner Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Liners Not Sent-Shipping: 1</span></p>
    <p class="normal">Orders Shipped Today: 0</p>
    <p class="normal">Order&nbsp;Received: 14</p>
    <p class="normal">Payment&nbsp;Declined: 6</p>
    <p class="normal">Payment&nbsp;Authorized: 3</p>
    <p class="normal">Mgt&nbsp;Hold: 6</p>
    <p class="normal">Order&nbsp;Sent&nbsp;to&nbsp;Shipping: 3</p>
    <p class="normal">Pending&nbsp;Mgt&nbsp;Approval&nbsp;for&nbsp;PMT: 4</p>
    <p class="normal">HELP&nbsp;ME: 1</p>
    <p class="normal"><span class="big-ps">Expedited/Courier Orders Sent to Shipping: 2</span><span class="tiny-ps">Exped/Courier Sent to Shipping: 2</span></p>
  </div>

user_143616260 

            .tiny-ps {
             display: block;
            }

            .big-ps {
              display: none;
            }

            div.summary-container {
              border: 2px ridge;
              width: 100%;
              font-weight: normal;
              background-color: #eaeaea;
            }

            p {
              font-family: Tahoma, Arial, Helvetica;
            }

            p.highlight {
              display: block;
              color: #ffffff;
              font-weight: bold;
              text-align: center;
            }

            p.highlight:nth-of-type(odd) {
              background-color: #800000;
            }

            p.highlight:nth-of-type(even) {
              background-color: #800020;
            }

            @media screen and (min-width: 500px) {
              div.summary-container {
                margin: 10px 0px;
              }
              p {
                font-size: 12pt;
                margin-bottom: 5px;
                margin-top: 5px;
              }
              p.normal {
                display: inline;
                margin-right: 2%;
                font-size: 12pt;
              }
              p.highlight {
                display: block;
                margin: 2px 0px 2px 0px;
                font-size: 12pt;
              }
              .billName {
                display: block;
              }
              .Norm9 {
                font-size: 8pt;
              }
              .tiny-ps {
                display: none;
              }
              .big-ps {
                display: inline-block;
              }
            }
            #num{
                width: 5%;
                text-align:left;
                padding-block:initial;
            }
            #std{
                text-align:left;
            }
            .cent{
                margin-left: auto;
                margin-right: auto;
            }
<div class="summary-container">
            <p class="highlight">Address&nbsp;Correction: 3</p>
            <p class="highlight"><span class="tiny-ps">Exped/Cour NOT Sent-Shipping: 5</span><span class="big-ps">Expedited/Courier Orders NOT Sent to Shipping: 5</span></p>
            <p class="highlight"><span class="big-ps">Pickup Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Pickups Not Sent-Shipping: 1</span></p>
            <p class="highlight"><span class="big-ps">Liner Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Liners Not Sent-Shipping: 1</span></p>
            <table class="cent">
                <tr>
                <td id="std"><p class="normal">Orders Shipped Today:</td><td id="num">0</p></td>
                <td id="std"><p class="normal">Order&nbsp;Received: </td><td id="num">14</p></td>
                <td id="std"><p class="normal">Payment&nbsp;Declined: </td><td id="num">6</p></td></tr>
                <tr>
                <td id="std"><p class="normal">Payment&nbsp;Authorized: </td><td id="num">3</p></td>
                <td id="std"><p class="normal">Mgt&nbsp;Hold: </td><td id="num">6</p></td>
                <td id="std"><p class="normal">Order&nbsp;Sent&nbsp;to&nbsp;Shipping: </td><td id="num">3</p></td></tr>
                <tr>
                <td id="std"><p class="normal">Pending&nbsp;Mgt&nbsp;Approval&nbsp;for&nbsp;PMT: </td><td id="num">4</p></td>
                <td id="std"><p class="normal">HELP&nbsp;ME: </td><td id="num">1</p></td>
                <td id="std"><p class="normal"><span class="big-ps">Expedited/Courier Orders Sent to Shipping: </td><td id="num">2</span><span class="tiny-ps">Exped/Courier Sent to Shipping: 2</span></p></td></tr>
            </table>
        </div>

.tiny-ps {
        display: block;
      }
      
      .big-ps {
        display: none;
      }
      
      div.summary-container {
        border: 2px ridge;
        width: 100%;
        font-weight: normal;
        background-color: #eaeaea;
      }
      
      p {
        font-family: Tahoma, Arial, Helvetica;
      }
      
      p.highlight {
        display: block;
        color: #ffffff;
        font-weight: bold;
        text-align: center;
      }
      
      p.highlight:nth-of-type(odd) {
        background-color: #800000;
      }
      
      p.highlight:nth-of-type(even) {
        background-color: #800020;
      }
      
      @media screen and (min-width: 500px) {
        div.summary-container {
          margin: 10px 0px;
        }
        p {
          font-size: 12pt;
          margin-bottom: 5px;
          margin-top: 5px;
        }
        p.normal {
          border: 1px unset;
          padding:7px;
          text-align:right;
          font-size: 12pt;
          margin-left: 20px;
          margin-right: auto;
        }
        p.highlight {
          display: block;
          margin: 2px 0px 2px 0px;
          font-size: 12pt;
        }
        .billName {
          display: block;
        }
        .Norm9 {
          font-size: 8pt;
        }
        .tiny-ps {
          display: none;
        }
        .big-ps {
          display: inline-block;
        }
        .grid-container{
          grid-template-columns: auto auto auto auto auto auto;
          
          display:grid;
          padding:10px;
        }
      }
<div class="summary-container">
      <p class="highlight">Address&nbsp;Correction: 3</p>
      <p class="highlight"><span class="tiny-ps">Exped/Cour NOT Sent-Shipping: 5</span><span class="big-ps">Expedited/Courier Orders NOT Sent to Shipping: 5</span></p>
      <p class="highlight"><span class="big-ps">Pickup Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Pickups Not Sent-Shipping: 1</span></p>
      <p class="highlight"><span class="big-ps">Liner Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Liners Not Sent-Shipping: 1</span></p>
      <div class="grid-container">
        <p class="normal">Orders Shipped Today:</p><p class="normal">0</p>
        <p class="normal">Order&nbsp;Received:<p class="normal">14</p>
        <p class="normal">Payment&nbsp;Declined:<p class="normal">6</p>
        <p class="normal">Payment&nbsp;Authorized:<p class="normal">3</p>
        <p class="normal">Mgt&nbsp;Hold:<p class="normal">6</p>
        <p class="normal">Order&nbsp;Sent&nbsp;to&nbsp;Shipping:<p class="normal">3</p>
        <p class="normal">Pending&nbsp;Mgt&nbsp;Approval&nbsp;for&nbsp;PMT:<p class="normal">4</p>
        <p class="normal">HELP&nbsp;ME:<p class="normal">1</p>
        <p class="normal"><span class="big-ps">Expedited/Courier Orders Sent to Shipping:</p><p class="normal">2</p></span><p class="normal"><span class="tiny-ps">Exped/Courier Sent to Shipping:2</span></p>
      </div>
    </div>

user_160399830

Use CSS's text-indent property.

p {
  text-indent: 45px
}

Adjust the pixel value to whatever fits. You can also use a percentage value for responsive sites.

user_133497550

try this

Expedited/Courier Orders Sent to Shipping

you can also put in table

.tiny-ps {
  display: block;
}

.big-ps {
  display: none;
}

div.summary-container {
  border: 2px ridge;
  width: 100%;
  font-weight: normal;
  background-color: #eaeaea;
}

p {
  font-family: Tahoma, Arial, Helvetica;
}
p.highlight {
  display: block;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

p.highlight:nth-of-type(odd) {
  background-color: #800000;
}

p.highlight:nth-of-type(even) {
  background-color: #800020;
}

@media screen and (min-width: 500px) {
  div.summary-container {
    margin: 10px 0px;
  }
  p {
    font-size: 12pt;
    margin-bottom: 5px;
    margin-top: 5px;
  }
  p.normal {
    display: inline;
    margin-right: 2%;
    font-size: 12pt;
  }
  p.highlight {
    display: block;
    margin: 2px 0px 2px 0px;
    font-size: 12pt;
  }
  .billName {
    display: block;
  }
  .Norm9 {
    font-size: 8pt;
  }
  .tiny-ps {
    display: none;
  }
  .big-ps {
    display: inline-block;
  }
}
<div class="summary-container">
    <p class="highlight">Address&nbsp;Correction: 3</p>
    <p class="highlight"><span class="tiny-ps">Exped/Cour NOT Sent-Shipping: 5</span><span class="big-ps">Expedited/Courier Orders NOT Sent to Shipping: 5</span></p>
    <p class="highlight"><span class="big-ps">Pickup Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Pickups Not Sent-Shipping: 1</span></p>
    <p class="highlight"><span class="big-ps">Liner Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Liners Not Sent-Shipping: 1</span></p>
    <table style="width:100%">
  <tr>
    <td>Orders Shipped Today:</td>
    <td>0</td>
    <td>Order&nbsp;Received:</td>
    <td>14</td>
    <td>Payment&nbsp;Declined:</td>
    <td>6</td>
  </tr>
  <tr>
    <td>Payment&nbsp;Authorized:</td>
    <td>3</td>
    <td>Mgt&nbsp;Hold:</td>
    <td>6</td>
    <td>Order&nbsp;Sent&nbsp;to&nbsp;Shipping:</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Pending&nbsp;Mgt&nbsp;Approval&nbsp;for&nbsp;PMT:</td>
    <td>4</td>
    <td>HELP&nbsp;ME: 1</td>
    <td>1</td>
    <td>Payment&nbsp;Declined:</td>
    <td>6</td>
  </tr>
</table>
    
    <p class="normal"><span class="big-ps">Expedited/Courier Orders Sent to Shipping: 2</span><span class="tiny-ps">Exped/Courier Sent to Shipping: 2</span></p>
  </div>

user_77504160 

            .tiny-ps {
             display: block;
            }

            .big-ps {
              display: none;
            }

            div.summary-container {
              border: 2px ridge;
              width: 100%;
              font-weight: normal;
              background-color: #eaeaea;
            }

            p {
              font-family: Tahoma, Arial, Helvetica;
            }

            p.highlight {
              display: block;
              color: #ffffff;
              font-weight: bold;
              text-align: center;
            }

            p.highlight:nth-of-type(odd) {
              background-color: #800000;
            }

            p.highlight:nth-of-type(even) {
              background-color: #800020;
            }

            @media screen and (min-width: 500px) {
              div.summary-container {
                margin: 10px 0px;
              }
              p {
                font-size: 12pt;
                margin-bottom: 5px;
                margin-top: 5px;
              }
              p.normal {
                display: inline;
                margin-right: 2%;
                font-size: 12pt;
              }
              p.highlight {
                display: block;
                margin: 2px 0px 2px 0px;
                font-size: 12pt;
              }
              .billName {
                display: block;
              }
              .Norm9 {
                font-size: 8pt;
              }
              .tiny-ps {
                display: none;
              }
              .big-ps {
                display: inline-block;
              }
            }
            #num{
                width: 5%;
                text-align:left;
                padding-block:initial;
            }
            #std{
                text-align:left;
            }
            .cent{
                margin-left: auto;
                margin-right: auto;
            }
<div class="summary-container">
            <p class="highlight">Address&nbsp;Correction: 3</p>
            <p class="highlight"><span class="tiny-ps">Exped/Cour NOT Sent-Shipping: 5</span><span class="big-ps">Expedited/Courier Orders NOT Sent to Shipping: 5</span></p>
            <p class="highlight"><span class="big-ps">Pickup Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Pickups Not Sent-Shipping: 1</span></p>
            <p class="highlight"><span class="big-ps">Liner Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Liners Not Sent-Shipping: 1</span></p>
            <table class="cent">
                <tr>
                <td id="std"><p class="normal">Orders Shipped Today:</td><td id="num">0</p></td>
                <td id="std"><p class="normal">Order&nbsp;Received: </td><td id="num">14</p></td>
                <td id="std"><p class="normal">Payment&nbsp;Declined: </td><td id="num">6</p></td></tr>
                <tr>
                <td id="std"><p class="normal">Payment&nbsp;Authorized: </td><td id="num">3</p></td>
                <td id="std"><p class="normal">Mgt&nbsp;Hold: </td><td id="num">6</p></td>
                <td id="std"><p class="normal">Order&nbsp;Sent&nbsp;to&nbsp;Shipping: </td><td id="num">3</p></td></tr>
                <tr>
                <td id="std"><p class="normal">Pending&nbsp;Mgt&nbsp;Approval&nbsp;for&nbsp;PMT: </td><td id="num">4</p></td>
                <td id="std"><p class="normal">HELP&nbsp;ME: </td><td id="num">1</p></td>
                <td id="std"><p class="normal"><span class="big-ps">Expedited/Courier Orders Sent to Shipping: </td><td id="num">2</span><span class="tiny-ps">Exped/Courier Sent to Shipping: 2</span></p></td></tr>
            </table>
        </div>

user_160399830
Related