CODEWITHSUNDEEP
htmlcss
Vilsol
Vilsol

Reputation: 722

CSS three columns with middle column fixed width

I need to position an element in between two other elements. The middle element has a specified width, but the side elements must calculate their width automatically (for different screen widths). If I add the left element it completely forgets about the "margin: 0 auto" on the middle one, and adding an element on the right just places it below, because the middle element is already occupying the space with "float: right"

What I have tried:

HTML:

<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>

CSS:

* {
    height: 200px;
}
.left {
    background: red;
    width: auto;
    overflow: hidden;
}
.middle {
    background: green;
    width: 400px;
    float: right;
}
.right {
    background: blue;
    width: auto;
    overflow: hidden;
}

Here is JSFiddle showing it: http://jsfiddle.net/xnwv8scp/2/

Upvotes: 2

Views: 1883

Answers (3)

Neville Hillyer
Neville Hillyer

Reputation: 354

I think the following is very close to what you want - adjust overflow as required.

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Three column layout</title>
<style>
body { margin: 0; overflow: hidden }
#X { position: absolute; height: 200px; overflow: auto; padding: 9px; border: 1px solid red; margin: 9px 210px 0 9px; left: 0; right: 50% }
#Y { position: absolute; height: 200px; overflow: auto; padding: 9px; border: 1px solid red; margin: 9px -200px 0 -200px; left: 50%; right: 50% }
#Z { position: absolute; height: 200px; overflow: auto; padding: 9px; border: 1px solid red; margin: 9px 9px 0 210px; left: 50%; right: 0 }
</style>
<div id=X>
Left content
</div>
<div id=Y>
Middle content
</div>
<div id=Z>
Right content
</div>

Upvotes: -1

Stickers
Stickers

Reputation: 78686

Here is the CSS table solution which works on more browsers - IE8+

http://jsfiddle.net/xnwv8scp/3/

body {
    display: table;
    width: 100%;
    height: 200px;
    margin: 0;
}
body > div {
    display: table-cell;
}
.left {
    background: red;
}
.middle {
    background: green;
    width: 400px;
}
.right {
    background: blue;
}
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>

Upvotes: 2

Oriol
Oriol

Reputation: 288120

You can try flexbox:

body {
  display: flex;  /* Magic begins */
}
.middle {
  width: 400px;   /* Specified width */
}
.left, .right {
  flex: 1;        /* Fill available space */
}
body > * {
  min-width: 0;   /* Widths ignore the content */
  height: 200px;
}
.left { background: red; }
.middle { background: green; }
.right { background: blue; }
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>

Upvotes: 2

Related Questions