CODEWITHSUNDEEP
csslayoutmultiple-columns
justinl
justinl

Reputation: 10538

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

I'm having trouble getting the following three-column layout to work:

    A              B              C
+-------+-----------+-------------------------+
|       |           |                         |
| Fixed |   Fixed   |  Expands to fill width  |
|       |           |                         |
+-------+-----------+-------------------------+

Where:

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/

Upvotes: 0

Views: 241

Answers (5)

Sakil Suva
Sakil Suva

Reputation: 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%
}

Upvotes: 0

Stickers
Stickers

Reputation: 78676

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

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 105853

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>

Upvotes: 2

TannerHolm
TannerHolm

Reputation: 2033

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;
}

Upvotes: 1

j08691
j08691

Reputation: 207861

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>

Upvotes: 2

Related Questions