CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Arpad Flandorffer
Arpad Flandorffer

Reputation: 145

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

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.

Upvotes: 1

Views: 89

Answers (3)

ribbit
ribbit

Reputation: 1283

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.

Upvotes: 1

Goran Jawdat
Goran Jawdat

Reputation: 31

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>

Upvotes: 1

J.T. Houtenbos
J.T. Houtenbos

Reputation: 956

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>

Upvotes: 2

Related Questions