CODEWITHSUNDEEP
htmlcssmultiple-columns
Nate
Nate

Reputation: 530

CSS for three column display

I want to create the following three column layout. The middle column will be of variable size and be centered. The left and right column will grow or shrink to meet the edge of the middle column and the edge of the outer parent div. It should look like this.

-------------------------------------------------------------
| Size: X        |     Variable Size   |           Size: X  |          
-------------------------------------------------------------

I have tried a few different methods but none have worked.

EDIT: To clarify I'm trying to achieve the effect of a header that is centered with two horizontal lines on either side of the text.

https://css-tricks.com/line-on-sides-headers/

I wanted to see if it was possible to do with three nested divs.

Upvotes: 0

Views: 496

Answers (5)

Etienne Bagnoud
Etienne Bagnoud

Reputation: 11

According to

The left and right column will grow or shrink to meet the edge of the middle column and the edge of the outer parent div.

You simply want to have each column in % . The easiest way to do seems to be :

<html>
<head>
<title>test</title>
<style>
.side {
  width: 20%;
  float: left;
  background-color: red;
  height: 100%;
}
.middle {
  width: 60%; 
  float: left;
  background-color: blue;
  height: 100%;
}
</style>
</head>
<body>
<div class="side">&nbsp;</div>
<div class="middle">&nbsp;</div>
<div class="side">&nbsp;</div>
</body>
</html>

Upvotes: 0

Dmitriy
Dmitriy

Reputation: 4503

*{
    padding: 0;
    margin: 0;
}

.table{
    display: table;
    width: 100%;
    max-width: 400px;
    margin: 25px auto;
    border-top: 1px dashed #222;
    border-bottom: 1px dashed #222;
}
.table > div{
    display: table-cell;
    vertical-align: middle;   
    text-align: center;
    padding: 10px;
    border-right: 1px dashed #222;
}
.table > div:nth-child(1){
    border-left: 1px dashed #222;
}
.table > div:nth-child(1),
.table > div:nth-child(3){
    width: 20%;
}
<div class="table">
    <div>cell</div>
    <div>cell</div>
    <div>cell</div>
</div>

Upvotes: 0

Alex Wright
Alex Wright

Reputation: 456

There are a couple different methods you could take. Actually, 5 that I can think of.

For the next few examples, the markup is this:

<div class="container">
    <aside class="fixed column"></aside>
    <main class="fluid column"></main>
    <aside class="fixed column"></aside>
</div>

Global CSS

.fixed {
    width: 100px;
}
.fluid {
    calc(100% - 200px); /* subtract total fixed width of the sidebars */
}

Flexbox:

.container {
    display: flex;
}
.container .column {
    flex: 0 1 1;
}

Float:

.container:after {
    content: '';
    clear: both;
    display: table;
}
.container .column {
    float: left;
}

Table:

.container {
    display: table;
}
.container .column {
    display: table-cell;
}

Inline-Block:

.container .column {
    display: inline-block;
}
.container .column:not(:first-child) {
    margin-left: -4px;
}

Absolute:

.container {
    position: relative;
}
.container .column {
    top: 0;
    position: absolute;
}
.container .fluid {
    left: 100px; /* width of 1 fixed sidebar */
}
.container .fixed:last-child {
    right: 0;
}

Here's a link to the codepen :) http://codepen.io/akwright/pen/OPvwLv

Upvotes: 1

Tomer Almog
Tomer Almog

Reputation: 3868

Just use display table and table-cell. Don't use actual tables unless you have tabular data, it is not a best practice and hard to make responsive.

        .table{
            display:table;
            width:100%;
        }
        .table-cell{
            display: table-cell;
            text-align: center;
        }
        .cell1{
            background-color: red;
        }

        .cell3{
            background-color: blue;
        }
    <div class="table">
        <div class="table-cell cell1">123</div>
        <div class="table-cell cell2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut </div>
        <div class="table-cell cell3">321</div>
    </div>

Upvotes: 0

Riad Baghbanli
Riad Baghbanli

Reputation: 3319

<div>
  <table>
    <tr>
      <td width="20%">COLUMN 1</td>
      <td width="*">COLUMN 2</td>
      <td width="20%">COLUMN 3</td>
    </tr>
  </table>
</div>

Upvotes: 0

Related Questions