How to set an absolute margin to an element using CSS or Bootstrap?

Question

I have several div elements where inside every div there is a table between some paragraphs (p) using the following code:

<p style="display: inline-block;">
    Something BEFORE the table
    <table style="display: inline-block;">
        <thead>
            <tr>
                <th>header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data</td>
            </tr>
        </tbody>
    </table>
    Something AFTER the table
</p>

which produces a nice content that looks something like this:

                          head
Something BEFORE the table    Something AFTER the table
                          data

However on each div there are different content lengths BEFORE and AFTER the table making it look like this:

                          head
Something BEFORE the table    Something AFTER the table
                          data
                      head
Short BEFORE the table    Short AFTER the table
                      data
                               head
Something long BEFORE the table    Something long AFTER the table
                               data

What I want is set some "margin" to every table so they are a set distance from the beginning of their parent element (p on this case) so it will hopefully look like this:

                               head
Something BEFORE the table         Something AFTER the table
                               data
                               head
Short BEFORE the table             Short AFTER the table
                               data
                               head
Something long BEFORE the table    Something long AFTER the table
                               data

The BEFORE, table, and AFTER elements of the page must be handled like this as having each of these on their own div and displaying them side by side will mess with this page section styling and also will produce a similar problem but now oriented vertically (however if your solution requires to do this please do share... maybe I'll end up using it).

P.D: If your solution includes Bootstrap please use version 3.

P.D.2: I'm sorry about how messy the examples look I'm still getting used to this.

_Sidenote:_ You [shouldn't](https://stackoverflow.com/questions/10086912/why-is-table-not-allowed-inside-p) be putting tables inside a **p** tag. — Lewis, Mar 13 '19 at 16:43
If you are using a table already for the data, just add a column before for the before text and a column after for the after text. The effect you are going for is exactly the behavior of a single table. Get all your content in a single table and done. — BugsArePeopleToo, Mar 13 '19 at 16:47

score 2 · Accepted Answer · answered Mar 13 '19 at 16:44

Wrap it in a table structure. This can be done with div's styled as tables. This way you can make it responsive.

! Do not ever again put other block level elements in a p element

See: Why is <table> not allowed inside <p>

Below is the HTML of what you need:

.table{
  display: table; 
  widht: 100%; 
}
.row {
  display: table-row;
}
.cell{
  display: table-cell;
  padding: 0 7.5px;
}

<div class='table'>
  <div class='row'>
    <div class='cell'>
      Something BEFORE the table
     </div>
     <div class='cell'>
      <table>
          <thead>
              <tr>
                  <th>header</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>data</td>
              </tr>
          </tbody>
      </table>
     </div> 
     <div class='cell'>
      Something AFTER the table
      </div>
  </div>

  <div class='row'>
    <div class='cell'>
      Something LONGGGGGG BEFORE the table
     </div>
     <div class='cell'>
      <table>
          <thead>
              <tr>
                  <th>header</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>data</td>
              </tr>
          </tbody>
      </table>
     </div> 
     <div class='cell'>
      Something AFTER the table
      </div>
  </div>
 </div>

Big thanks for giving me a solution and teaching me how to properly use HTML. — Arpad Flandorffer, Mar 13 '19 at 16:50

ribbit · Answer 2 · 2019-03-13T19:36:14.903

1

To set an absolute position you can use position: absolute on the element you're trying to position. It will get positioned at coordinates (0,0) (top-left) of it's first non-static parent. (By default every element has a position set to static, until you explicitly set it to something else). So that means you also need to assign a position to the parent (p I'm your case) so that it overwrites the default. Something like position: relative on the parent should do the job.

After that you can use the "top, right, bottom, left" CSS properties respectively to set a custom position from the parent's top/right/bottom/left border.

p {
    position: relative;
}

table {
    position: absolute;
    left: 150px; // or whatever distance works best
}

Something like this, or it's equivalent inline version should do.

edited Mar 13 '19 at 19:36

answered Mar 13 '19 at 16:49

ribbit

1,183
11
14

Thanks for the answer, but this will not work on my code as once the table has it's `position` set to `absolute` it will "hover" over my text and that is not what I want. – Arpad Flandorffer Mar 13 '19 at 18:38
No worries! I'm glad if my insights are any useful. Also, I agree this may not be the best approach for a table. Additionally, the `150px` above is just and example, you can replace it with whatever works best. But most importantly, the downside of using absolute position with spacing is that you must be sure that the applied space will always work, regardless of how the non-absolute content may expand, and regardless of the screen sizes. It's usually good for positioning logos or other static elements, not so much of you expect the widths/heights to be changing. – ribbit Mar 13 '19 at 19:43

score 1 · Answer 3 · answered Mar 13 '19 at 16:58

Here is a simple and easy solution:

.before-table {
  min-width: 250px;
  display: inline-block;
}

<p style="display: inline-block;">
    <div class="before-table">Something BEFORE the table</div>
    <table style="display: inline-block;">
        <thead>
            <tr>
                <th>header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data</td>
            </tr>
        </tbody>
    </table>
    <span>Something AFTER the table</span>
</p>

How to set an absolute margin to an element using CSS or Bootstrap?

3 Answers3