Sometimes, we want to create 2 column div layout with right column with fixed width, left fluid with CSS.
In this article, we’ll look at how to create 2 column div layout with right column with fixed width, left fluid with CSS.
How to create 2 column div layout with right column with fixed width, left fluid with CSS?
To create 2 column div layout with right column with fixed width, left fluid with CSS, we use table layout.
For instance, we write
<div class="container">
<div class="left">left content flexible width</div>
<div class="right">right content fixed width</div>
</div>
to add nested divs.
Then we write
.container {
display: table;
width: 100%;
}
.left {
display: table-cell;
width: 150px;
}
.right {
display: table-cell;
width: 150px;
}
to make the container div a table container with display: table;.
And the we make the inner divs table cells with display: table-cell;.
Conclusion
To create 2 column div layout with right column with fixed width, left fluid with CSS, we use table layout.
