Fixed Width Div on Right, Fill Remaining Width Div on Left

Fixed width div on right, fill remaining width div on left

You can do it like this:

HTML:

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

CSS:

.left{
    background:red;

}
.right{
    float:right;
    width:200px;
    background:green
}

Check this live example http://jsfiddle.net/QHTeS/2/

Fixed width div on left, fill remaining width div on right

Try removing the float:left and width:100% from .header-right — the right div then behaves as requested.

.header {  float: left;  background: #efefef;  background-repeat: no-repeat;  width: 240px;  height: 100px;}
.header-right {  overflow: hidden;   background-color: #000;  height: 100px;}

<div class="header"></div><div class="header-right"></div>

How to make a div fill a remaining horizontal space?

This seems to accomplish what you're going for.

#left {  float:left;  width:180px;  background-color:#ff0000;}#right {  width: 100%;  background-color:#00FF00;}

<div>  <div id="left">    left  </div>  <div id="right">    right  </div></div>

Expand a div to fill the remaining width

The solution to this is actually very easy, but not at all obvious. You have to trigger something called a "block formatting context" (BFC), which interacts with floats in a specific way.

Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it's set on become a BFC. BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do its thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.

This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can't recall.

Demos:

• Fixed Left: http://jsfiddle.net/A8zLY/5/
• Fixed Right: http://jsfiddle.net/A8zLY/2/

div {
  float: left;
}

.second {
  background: #ccc;
  float: none;
  overflow: hidden;
}

<div>Tree</div>
<div class="second">View</div>

CSS fill left and right divs while the center div has fixed width

Add flex-grow: 1; to both the left and right divs:

.wrapper{
  background-color: red;
  height: 200px;
  width: 100%;
  display:flex;
  flex-direction:row;
}
.left{
  background-color: blue;
}
.center{
  background-color: yellow;
  width: 200px;
  margin-left:auto;
  margin-right:auto;
}
.right{
  background-color: blue;
}

.left, .right {
flex-grow: 1;
}

<div class="wrapper">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>

make left div to fill all available space, when right div has fixed width

Try this:

HTML

<div id="left">
    Menu
</div>
<div style="text-align: center;">
<div id="right">
    Content
</div>
</div>

CSS

#left {
    background-color: green; /*for demonstration purposes*/
    float:left;
}

#right{
    background-color: blue;
    width: 800px;
}

JS

$(document).ready(function(){
    var width = $(document).width();
    var rightDivWidth = $("#right").width();
    var leftDivWidth = width - rightDivWidth;
    $("#left").css("width", leftDivWidth);
});

Demonstration

Make a div fill up the remaining width

Try out something like this:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

divs will naturally take up 100% width of their container, there is no need to explicitly set this width. By adding a left/right margin the same as the two side divs, it's own contents is forced to sit between them.

Note that the "middle div" goes after the "right div" in the HTML

Fill the remaining height or width in a flex container

Use the flex-grow property to make a flex item consume free space on the main axis.

This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.

A common example is flex-grow: 1 or, using the shorthand property, flex: 1.

Hence, instead of width: 96% on your div, use flex: 1.

---

You wrote:

So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.

The squashing of the fixed-width div is related to another flex property: flex-shrink

By default, flex items are set to flex-shrink: 1 which enables them to shrink in order to prevent overflow of the container.

To disable this feature use flex-shrink: 0.

For more details see The flex-shrink factor section in the answer here:

• What are the differences between flex-basis and width?

---

Learn more about flex alignment along the main axis here:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Learn more about flex alignment along the cross axis here:

• How does flex-wrap work with align-self, align-items and align-content?

Fill remaining space with left div

The right div with a fixed width must float:right; then the left div must stay as it is so it can take its full available width, but since you want the right div to be fixed, you must place it first.

HTML:

<div id="parentDiv">
    <div id="rightFixedDiv"></div>
     <div id="leftDynamicDiv></div>
</div>

CSS:

#rightFixedDiv
{
   float:right; 
   border-style:solid; 
   width:100px; 
   height:200px;
}
#leftDynamicDiv
{
   border-style:solid; 
   background-color:blue; 
   overflow:hidden; 
   height:200px;
}

Check it out, fixed width of 100px: http://jsfiddle.net/dkGbd/
fixed width of 200px: http://jsfiddle.net/eESTZ/

Now if you want the opposite, place the left div first, give it a float:left;

Working example:
http://jsfiddle.net/UShek/

3 columns, left and right fixed with, centre fills remaining space

You can easily do this with flex-box :

.container {  display: flex;  flex-direction: row}
.border {  width: 200px;  background-color: blue;}
.main {  flex: 1;}

<div class="container">  <div class="border">Border</div>  <div class="main">Center</div>  <div class="border">Border</div></div>

---

Related Topics