I'm currently working on a layout for a 3 column, full-width page. I want two columns to have a fixed width, while the third column should adapt to the full width between them, like this:
| Fixed Width || Variable Width || Fixed Width |
| Always Left || Adapts To Browser Window Size || Always Fixed Right |
I initially attempted to achieve this using float, but encountered issues. A suggestion to use display-table worked initially, but after making some edits to the page, the content in the left columns shifted to the bottom instead of aligning at the top where it should be. Can anyone offer assistance with this? Below is the current code I am using:
.pageContent{
background-color: #DADEE1;
width: 100%;
padding: 10px 0px 10px 0px;
}
.gridSystem{
display: table;
}
section{
display: table-cell;
}
.mainSidebar{
float: left;
vertical-align: top;
width: 140px;
}
.mainPage{
width: inherit;
overflow: hidden;
margin: 0px 0px 0px 0px;
padding: 20px;
}
.mainAdvert{
float: right;
width: 140px;
}
<div class="pageContent gridSystem">
<section class="mainSidebar"></section>
<section class="mainPage"></section>
<section class="mainAdvert"></section>
<div class="clearBoth"></div>
</div>
Any assistance would be greatly appreciated.