I'm striving to design a layout with three columns, where the left and right columns are static while the center column is flexible.
This can be achieved using display table and table cell, or by altering the order of columns in HTML. However, both options complicate the responsive layout. Specifically, when the screen width is below 1024px, the third column should move underneath the second column while the first column remains unchanged. Furthermore, when the width is reduced to under 500px, all content should transition into a single vertical column.
Additionally, each column's height must match the tallest column as they will have different backgrounds.
Assume we have the following structure:
#left {
width:200px;
position:absolute;
top:0;
left:0;
background-color:red;
height:100%;
}
#middle {
margin-left:200px;
}
#right {
width:200px;
position:absolute;
top:0;
right:0;
background-color:blue;
height:100%;
}<div id="content">
<div id="left">
LEFT FIXED
</div>
<div id="middle">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tellus vel lorem efficitur ornare. Maecenas sit amet commodo velit, at eleifend est. Cras luctus orci vitae erat maximus rutrum.
</div>
<div id="right">
RIGHT FIXED
</div>
</div>Is there a way to achieve a fixed left, fluid center, fixed right setup without using display table or reordering columns?
The recommended solutions often involve utilizing display table or rearranging the source order, which I prefer to avoid.