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>

Answer 1

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;
}

Answer 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

Answer 3

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>

Answer 4

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.

More on CSS Grids on MDN or css-tricks .

Answer 5

I believe all you need to do is add vertical-align: top; to your .floating-box but without a fiddle it's hard to say, so it should be:

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

The CSS rule pretty much does what it says on the tin and pulls all divs to be lined up to the top vertically.

Some more information can be found on theMDN vertical-align CSS page .

I have created a CodePen example using your markup above which you can see here .