I’ve created two simple examples. First one does not use flex as long as you don’t want to use it.
Example using calc()
.container > div {
float: left;
}
.left {
width: 100px;
background-color: pink;
}
.middle {
width: calc(100% - 200px);
background-color: blue;
}
.right {
width: 100px;
background-color: yellow;
}
<h1>No flex</h1>
<div class="container">
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</div>
Example using flex
.container {
display: flex;
}
.left {
width: 100px;
background-color: pink;
}
.middle {
flex-grow: 1;
background-color: blue;
}
.right {
width: 100px;
background-color: yellow;
}
<h1>Flex</h1>
<div class="container">
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</div>
float: left; and float: right can be used, but it has the following downsides:
- The
middle element needs to be used after the right element.
- If elements height is relying on its content then all the elements’ height will not be matched until you specify a fixed height. you can see a gray area which is the container in the below example.
.container {
text-align: center;
background: lightgray;
}
.container::after {
content: '';
display: block;
width: 0;
clear: both;
}
.left {
float: left;
width: 150px;
background: #33AFFF;
}
.right {
float: right;
width: 150px;
background: #FFC300;
}
.middle {
margin-left: 150px;
margin-right: 150px;
background: #FF5733;
}
<h2>float</h2>
<div class="container">
<div class="left">left left left left left left left left left left </div>
<div class="right">right right right right right </div>
<div class="middle">middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle </div>
</div>
<div>Next element</div>
Or you can use display: table and it’s children with display: table-cell.
.container {
display: table;
width: 100%;
}
.left {
display: table-cell;
width: 150px;
background: #33AFFF;
}
.middle {
display: table-cell;
background: #FFC300;
}
.right {
display: table-cell;
width: 150px;
background: #FF5733;
}
<h2>display: table & display: table-cell</h2>
<div class="container">
<div class="left">left left left left left left left left left left</div>
<div class="middle">middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle </div>
<div class="right">right right right right right </div>
</div>
<div>Next element</div>
I’m trying to create three columns in html with the left column positioned at the left side of the screen and at fixed width, the right side positioned at the right of the screen and at fixed width and the middle column elastic and filling up the remaining width.
I’m trying to NOT use flex if that’s possible.
What should the CSS look like?
html
<div class="container">
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</div>
css
.container {}
.left {}
.middle {}
.right {}
The old way is float. First right &left floatting, then middle .
Thank you. In the no flex sample, you use
@n_1 I am not sure what do you mean. Left is
