Three-column variable width CSS page layout, right column expands - css

Question

I'm having trouble getting the following three-column layout to work:
A B C
+-------+-----------+-------------------------+
| | | |
| Fixed | Fixed | Expands to fill width |
| | | |
+-------+-----------+-------------------------+
Where:
A is fixed width.
B is a fixed width.
C contains content which I'd like to fill up the remaining space on the page. The page itself which has a resizable width
I've found numerous solutions where the center column is fluid, but I'm having trouble getting the right column to be the fluid width with the left and middle column having fixed width without having the right column line break when it expands larger. The content in the right column is mostly text while the left and middle columns are images.
Here's a fiddle I've been using for testing which has everything setup: http://jsfiddle.net/7y7Lmvr9/2/

Answer 1

You can ditch the floats and use display:table-cell instead:
$('#div_right').click(function () {
$(this).append('-------');
});
#div_left {
display:table-cell;
border:1px solid #F00;
width: 100px;
}
#div_middle {
display:table-cell;
border:1px solid #0F0;
width: 100px;
}
#div_right {
display:table-cell;
border:1px solid #00F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='div_left'>Fixed width</div>
<div id='div_middle'>Fixed Width</div>
<div id='div_right'>Variable-width (click to widen). Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Answer 2

display:table has been said, so i ll only say flex:)
body {
display:flex;
}
body>div {
border:solid;
width:100px;
}
#div_right {
flex:1;
width:auto;
}
<div id='div_left'>
Fixed width
</div>
<div id='div_middle'>
Fixed Width
</div>
<div id='div_right'>
Variable-width (click to widen). Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 3

CSS calc() could be one of the solutions.
Demo - http://jsfiddle.net/7y7Lmvr9/3/
#div_left, #div_middle, #div_right {
border: 1px solid red;
box-sizing: border-box;
float:left;
}
#div_left, #div_middle {
width: 100px;
}
#div_right {
width: calc(100% - 200px);
}
Bowser compatibility - http://caniuse.com/#feat=calc

Answer 4

I recommend wrapping the three divs in another div, and setting the wrapper display to "flex." That way you can set the first two divs' width, and set the third to fill the remaining space.
http://jsfiddle.net/6LgkjpwL/
fiddle with flex implemented on wrapper.
A great resource on flex--
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
body{
font-weight:bold;
}
#wrapper{
display:flex;
flex-direction: row;
}
#div_left{
order: 1;
overflow: hidden;
border:1px solid #F00;
width: 100px
}
#div_middle {
order: 2;
overflow: hidden;
border:1px solid #0F0;
width: 100px
}
#div_right {
order:3;
flex:1;
border:1px solid #00F;
}

Answer 5

<div style="width:100%; overflow:hidden">
<div id='div_left'>
Fixed width
</div>
<div id='div_middle'>
Fixed Width
</div>
<div id='div_right'>
Variable-width (click to widen). Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
body{
font-weight:bold;
}
#div_left{
float:left;
overflow: hidden;
border:1px solid #F00;
width: 9%
}
#div_middle {
float:left;
overflow: hidden;
border:1px solid #0F0;
width: 9%
}
#div_right {
float:left;
border:1px solid #00F;
width: 79%
}