Splitting screen in half with CSS

Question

I've been using this, W3 Schools, a stackoverflow page with similar problem to make my table (in a div) inline to another div on the second half of the page.

I'm trying to split my screen with a vertical divide however as the right side is populated with content it is causing the left side to sink down the page

The only content on the left side is a PHP populated table but I feel it's that part of the code which is causing the alignment.

So looks something like this however I want to be able to add content to the right side div without it causing left side to drop down:

Code:

.floating-box {
  display: inline-block;
  width: 45%;
  height: 75px;
  margin: 0px;
  border: 1px solid #73AD21;
}

<div class="floating-box">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 7</th>
        <th>Column 8</th>
        <th>Column 9</th>
        <th>Column 10</th>
        <th>Column 11</th>
        <th>Column 12</th>
      </tr>
    </thead>
    <tbody>
      <?php foreach ($allArray  as $key => $value) { ?>

      <?php } ?>
    </tbody>
  </table>
</div>

<div class="floating-box">
  <h2>Floating box</h2>

</div>

`vertical-align: top;`? – Peter Featherstone Oct 05 '17 at 08:25 — Peter Featherstone, Oct 05 '17 at 08:25

Temani Afif · Answer 1 · 2020-05-07T23:24:35.470

3

add vertical-align:top and change the height to min-height to avoid issue of overflow :

.floating-box {
     display: inline-block;
     vertical-align:top;
     width: 45%;
     min-height: 75px;
     margin: 0px;
     border: 1px solid #73AD21;
}

edited May 07 '20 at 23:24

answered Oct 05 '17 at 08:26

Temani Afif

245,468
26
309
415

score 2 · Answer 2 · answered Oct 05 '17 at 08:27

2

You need to add vertical-align:top;

.floating-box {
    display: inline-block;
    width: 45%;
    height: 75px;
    margin: 0px;
    border: 1px solid #73AD21;
    vertical-align: top;
}

example here

answered Oct 05 '17 at 08:27

Vincent1989

1,593
2
13
25

score 2 · Answer 3 · answered Oct 05 '17 at 08:29

Add

.floating-box table {
    word-break: break-all;
}

.floating-box {
     width: 45%;
     margin: 0px;
     border: 1px solid #73AD21;
     float: left;
}

.floating-box table {
    word-break: break-all;
}

<div class="floating-box">
<table>
    <thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 7</th>
        <th>Column 8</th>
        <th>Column 9</th>
        <th>Column 10</th>
        <th>Column 11</th>
        <th>Column 12</th>
    </tr>
    </thead>
    <tbody>
       <tr>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
           <td>Lorem</td>
       </tr>
    </tbody>
</table>
</div>

<div class="floating-box">
     <h2>Floating box</h2>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

score 2 · Answer 4 · answered Oct 05 '17 at 08:37

CSS Grids would be a great solution to achieve that.

Here's an example: https://codepen.io/anon/pen/pWpgqp

HTML:

<div class="screen">
  <div class="left-side">LEFT SIDE</div>
  <div class="right-side">RIGHT SIDE RIGHT SIDE RIGHT SIDE {...}</div>
</div>

CSS:

html, body {
  margin: 0;
  padding: 0;
}

.screen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100wh;
}

.left-side {
  grid-column: 1;
  border: 1px solid #000;
}

.right-side {
  grid-column: 2;
  border: 1px solid #000;
}

grid-template-columns: 1fr 1fr; makes the split in half, because both columns takes the same amount of space, which is 1 fraction of available space left.

Splitting screen in half with CSS

5 Answers5