Vlad
Vlad

Reputation: 129

Postion element on the right side of another

A positioning question.
I have centered <table> and I want to position <div> on the right side, so table won't move slightly to the left. How do I do that?
enter image description here

I'm not very experienced with CSS and only know basics, so positioning always were a pain for me.

Upvotes: 1

Views: 31

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

You could put the table and div in an element, centered horizontally and position: relative and use absolute positioning to put the div outside and on the right.

.center {
  width: 50%;
  margin: auto;
  position: relative;
}

table {
  background: blue;
  width: 100%;
}

.side {
  position: absolute;
  top: 0; left: 100%;
  background: red;
}
<div class="center">
  <table>
    <tr>
      <td>table</td>
    </tr>
  </table>
  <div class="side">div</div>
</div>

Upvotes: 2

Related Questions