Lineup items in a multiple column layout

Question

I am constructing a structure with 3 columns in the layout. And I got 2 issues unresolved:

I want to insert a table in the middle column. However, when I do that, the table misplaces at the bottom of the column.
The third column also misplaces in the same way as table.

I am wondering why, and any solution to that to put the table up back in place at the top of the column.

<div style="width=100%;">

    <div style="float: left; width: 25%; padding: 5px; height: 100%; background: #F2F2F2">
        <h1>The first column</h1>
    </div>  

    <div style="float: left; width: 50%; padding: 5px">
        <h1>The second column</h1>
        <p>A paragraph in place</p>
        <table>             
            <tr>
                <th>Category</th>
                <th>Title</th>
                <th></th>
            </tr>
        </table>

    <div style="float: right; width: 25%; padding: 5px; height: 100%; background: #EFF7FF">
        <h1>The third column</h1>
    </div> 

</div>

You don't close the second `
` after the ``.
– junkfoodjunkie Jan 03 '17 at 01:26 — junkfoodjunkie, Jan 03 '17 at 01:26

score 2 · Answer 1 · edited May 23 '17 at 12:24

Two issues there: (1) You forgot to close the <div> that is containing the <table>. (2) Add box-sizing: border-box; so that padding will be part of the width, makes all the 3 columns together of 100% width.

Also, don't forget to clear the floats, e.g. set overflow: hidden; on the container, see here and here to learn more.

* {
  box-sizing: border-box;
}

<div style="width: 100%; overflow: hidden;">

    <div style="float: left; width: 25%; padding: 5px; height: 100%; background: #F2F2F2;">
        <h1>The first column</h1>
    </div>  

    <div style="float: left; width: 50%; padding: 5px;">
        <h1>The second column</h1>
        <p>A paragraph in place</p>
        <table>             
            <tr>
                <th>Category</th>
                <th>Title</th>
                <th></th>
            </tr>
        </table>
    </div> <!-- added here -->
    
    <div style="float: right; width: 25%; padding: 5px; height: 100%; background: #EFF7FF;">
        <h1>The third column</h1>
    </div> 
    
</div>

score 1 · Accepted Answer · answered Jan 03 '17 at 01:20

CSS Flexboxes are easily the coolest thing ever for layout like this. In addition to removing the floats ( a disgusting way to make columns, no offense) I also had to end the 2nd div before the 3rd one started. That is possibly your only issue, but like I said, floating things left and right to make columns is pretty gross compared to flex.

<div style="display: flex">

    <div style="padding: 5px; height: 100%; background: #F2F2F2">
        <h1>The first column</h1>
    </div>  

    <div style=" width: 50%; padding: 5px">
        <h1>The second column</h1>
        <p>A paragraph in place</p>
        <table>             
            <tr>
                <th>Category</th>
                <th>Title</th>
                <th></th>
            </tr>
        </table>
      </div>
    <div style="width: 25%; padding: 5px; height: 100%; background: #EFF7FF">
        <h1>The third column</h1>
    </div> 
</div>

Thanks a lot, did not notice the style flex, which is really useful! — CL. L, Jan 03 '17 at 02:22

Lineup items in a multiple column layout

2 Answers2