How to apply remaining width to a div in the middle of 2 other divs

Question

I'm trying to fill remaning area of screen with the second div, div 1 and 2 got fixed width. How could i achive this effect?

HTML

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

Problem can be fixed by using this CSS code, when second div is set to auto it will fill remaning area left to be filled.

#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
float:right;
width:400px;
height:200px;
background-color: green; 
}
#div3 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}

Edit

score 4 · Accepted Answer · edited May 12 '14 at 12:35

4

Classically, this would look like this:

CSS:

#div1 {
    float:left;
    width:400px;
    height:200px;
    background-color: gray;
}
#div2 {
    margin-left: 400px;
    margin-right: 400px;
    width:auto;
    height:200px;
    background-color: silver;
}
#div3 {
    float:right;
    width:400px;
    height:200px;
    background-color: green;
}

HTML:

<div id="div1"></div>
<div id="div3"></div>
<div id="div2"></div>

DEMO: http://jsfiddle.net/NicoO/5AJkn/

P.S: expand your screen > 800px to prevent the layout from breaking. Could also be solved by adding a min-width to a new parent element.

edited May 12 '14 at 12:35

Marc Audet

46,011
11
63
83

answered May 12 '14 at 12:31

Nico O

13,762
9
54
69

i don't know why this answer has so many up votes, but this answer actually modifies op's HTML, which is not necessary. http://jsfiddle.net/tilwinjoy/5AJkn/1/ - How It works on original markup) – T J May 12 '14 at 12:48
@user3616064 how is this exactly what you were looking for..? this is not the html structure you shared in the question..! – T J May 12 '14 at 12:53
you are right @TJ I did this to show, what needs to be changed. But of course the change in the html is not really necessary. But your demo is broken. If anything, it should look like this: http://jsfiddle.net/NicoO/5AJkn/2/ to keep the dom like it is. – Nico O May 12 '14 at 12:54
you got me, its not exacly what i was looking for however its easier to change one line of html then express it with much more css code. to achive same effect while keeping html structure. – user3616064 May 12 '14 at 13:10
@user3616064 yes tj is right, i posted the solution for this within my comment above. Good look. – Nico O May 12 '14 at 13:13

T J · Answer 2 · 2014-05-12T12:57:29.173

Apply position: relative for their parent (if it is not positioned already) and apply the following to div2:

#div2{
    position:absolute;
    left:400px; /* width of div1 */
    right:400px; /* width of div3 */
    height:200px;
}

JSFiddle

You can use css3 calc() function if older browser support is not an issue.

#div2{
    display:inline-block;
    width: calc(100% - 800px); /*100% - width of div1 and div3 */
    height:200px;
}

JSFiddle

score 1 · Answer 3 · answered May 12 '14 at 12:27

1

If your browser support calc, you coudl try:

#div2 { float:left; width:calc(100% - 800px); height:200px; }

Add the margins too, if any.

answered May 12 '14 at 12:27

Luan Nico

5,376
2
30
60

score 1 · Answer 4 · edited May 12 '14 at 12:37

1

<style>
    .box{display: table;width: 100%;}
    #div1{width:400px; height:200px;background: #000;display: table-cell}
    #div2{width:auto; height:200px;background: #e6e6e6;display: table-cell}
    #div3{width:400px; height:200px;background: #000;display: table-cell}
</style>

<div class="box">
    <div id="div1"></div>
    <div id="div2">ds</div>
    <div id="div3"></div>
</div>

edited May 12 '14 at 12:37

paulalexandru

9,218
7
66
94

answered May 12 '14 at 12:35

Ankit Agrawal

6,034
6
25
49

score 1 · Answer 5 · edited May 23 '17 at 12:13

1

It is the same questions that :

This Codepen fix your problem

edited May 23 '17 at 12:13

Community

1
1

answered May 12 '14 at 12:45

ColoO

813
5
14

How to apply remaining width to a div in the middle of 2 other divs

5 Answers5