How make middle div to fill space between floating elements?

Question

I have three div elements: left, middle and right. Left and right are fixed and floating. What I want is the middle div to fill the gap in between them.

This is my code:

<!DOCTYPE html>
<html>
<head>
   <style>
      * {border: dotted 1px red;}
      #left {
         width: 200px;
         float: left;
      }
      #middle {
         float: left;
      }
      #right {
         width: 200px;
         float: right;
      }
   </style>
</head>
<body>
   <div id="left"  >  left   </div>
   <div id="middle">  middle </div>
   <div id="right" >  right  </div>
</body>
</html>

Any ideas on how to do this? I tried different solutions but didn't manage to do what I want.

Have you tried converting from `px` to percentages? – Anthony Forloney Mar 30 '13 at 23:40 — Anthony Forloney, Mar 30 '13 at 23:40

ScottS · Accepted Answer · 2016-01-20T21:10:31.913

76

The key is to restructure your html to have middle last, remove the float from the middle and replace it with overflow: hidden.

View fiddle example.

HTML

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

CSS

#left {
    width: 200px;
    float: left;
}
#middle {
    overflow: hidden;
}
#right {
    width: 200px;
    float: right;
}

edited Jan 20 '16 at 21:10

answered Mar 31 '13 at 00:01

ScottS

71,703
13
126
146

Yo, your link is broken. No chance the article is still available, is there? Also, ballin' and elegant answer. Much apreesh. – Thomas Jan 20 '16 at 21:04
1

@Thomas Just found an archive of the webpage and swapped the link to that. – ScottS Jan 20 '16 at 21:10
And what if you want 'left' and 'right' element 'wrap content' (like an Android), so 'left' and 'right' consumes as much space as they need during rendering and middle takes the rest? So without predefining the width of the 2 side elements? – ktamas Jun 18 '19 at 17:07
@ktamas It appears as though [it will work](http://jsfiddle.net/mq7evo8r/2/), but obviously if you get too much content, then by the nature of the `float` it will [push stuff _down_](http://jsfiddle.net/mq7evo8r/6/) and [the "middle" is going to ultimately follow after the "right" content because of HTML positioning. So if that is not an issue, it works](http://jsfiddle.net/mq7evo8r/6/). – ScottS Jun 18 '19 at 18:47
@ScottS thanks, but yeah.. this is not good enough for me :) Right div's bottom should be aligned with left's bottom, so left should go only till right's left side. I will try to do some magic with display: table/table-cell and flex. But thanks anyways :) – ktamas Jun 19 '19 at 08:14

score 3 · Answer 2 · answered Mar 30 '13 at 23:41

3

I was able to replicate the issue and fix it using percentages instead of absolute values. Since you are looking for something flexible between the two elements this should work.

#left {
    width: 20%;
    float: left;
    background: #ccc;
}
#middle {
    width: 60%;
    float: left;
    display: block;
    background: #ddd;
}
#right {
    width: 20%;
    float: right;
    background: #bbb;
}

Here's a demo

answered Mar 30 '13 at 23:41

djthoms

3,026
2
31
56

4

Thank you. That works but I was wondering if there is a way to do it with a fixed size for the left and right divs. – Pithikos Mar 30 '13 at 23:53

How make middle div to fill space between floating elements?

2 Answers2

Linked