Last Updated:

Making sidebar Layout - align columns in HTML / CSS

In the block layout, the problem of positioning columns is still relevant. In this article, I will show you how you can manipulate the position and height of columns with minimal effort.

For example, we have two columns in the layout - the first rubber, with content, and the other fixed - with a navigation block and other secondary information.

Example Layout for HTML CSS

I am not a luminary of block layout, and such a task seemed to me rather non-trivial. If you put the sidebar code before the main content, then the problem is easily solved by traditional and . But I wanted the main content to be in the code earlier than the secondary information.marginfloat

First, I solved the problem "head-on", using tables.

<table class="container">
    <tr>
        <td class="content">...</td>
        <td class="aside">...</td>
    </tr>
</table>

With the tables, everything worked and leveled out extremely simply, as in the good old days. But using tables in this context is semantically incorrect.

Somehow, once again returning to solving this problem, I remembered that the css property has attributes and . When set to , the element will have table properties, and tells the browser that the element should be interpreted as a table cell.displaytabletable-celldisplay:tabledisplay:table-cell

.container {
    display: table;
    width: 100%;
}
article,
aside {
    display: table-cell;
    vertical-align: top;
}
aside {
    width: 300px;
}
<section class="container">
    <article>...</article>
    <aside>...</aside>
</section>

Such a hack allows you to preserve the semantics of the layout, while simplifying the process of positioning the columns to a minimum. In this scenario, you can quickly create any number of vertical columns of the same height, without unnecessary labor and shamanism with and . marginfloat