(CSS) how I could make the div takes all available space in width without a specific value but there is another div in the same place with a specific

Question

I have this issue I can't find a solution for it:

I have 3 divs, two of them are located inside the third.

The div which contains the others has a percentage width.

The second one which is inside the first, doesn't have a specific width and is floated to the left.

The third which is also inside the first does have a specific width and is floated to the right.

The question is how would I make the second div take as much width as possible??

Because it fits the contents as default.

<div id="a">
    <div id="b">
    </div>
    <div id="c">
    </div>
</div>
<style>
#a{
    width: 80%;
}
#b{
    width: ??;
    float:left;
}
#c{
    width: 50px;
    float:right;
}
</style>

Look at this answer http://stackoverflow.com/a/6487192/1563269 — lazyprogrammer, Jun 12 '13 at 11:57
In case you don't need IE8 support, it is as simple as `width:calc(100% - 50px);` — Fabrício Matté, Jun 12 '13 at 12:16
@FabrícioMatté Sure, if you want to ignore all of those mobile browsers that also don't support `calc()`. http://caniuse.com/#feat=calc — cimmanon, Jun 12 '13 at 12:17
@cimmanon Do you refer to native android browser/opera/opera mini? May as well go back and support IE6 which is a better browser than those. — Fabrício Matté, Jun 12 '13 at 12:23
@FabrícioMatté Do you think the average smart phone user changes their mobile browser? iOS5 is still worth worrying about. It's one thing to not support minor cosmetic properties like box-radius, but lack of support for `calc()` has serious usability implications. — cimmanon, Jun 12 '13 at 12:29
@cimmanon I haven't considered iOS previously. My point was that the average Android user not having Chrome or at least Firefox installed is more unacceptable than a desktop user with IE8. And Opera users seem to use it just so that they can get broken pages. Okay that was just my slightly biased view `` — Fabrício Matté, Jun 12 '13 at 12:31
If you're happy that your users are CSS3 compatible then you have calc() at your disposal. The answer to [this question](http://stackoverflow.com/questions/2434602/css-setting-width-height-as-percentage-minus-pixels) tells you all that you need to know on that matter. — Rob Forrest, Jun 12 '13 at 12:02

score 7 · Accepted Answer · answered Jun 12 '13 at 12:05

7

arrange your divs like this

<div id="a">
    <div id="c">456</div>
    <div id="b">123</div>   
</div>

and remove the float from #b

#b{
    background-color:#06F;
}

check the jsFiddle file

answered Jun 12 '13 at 12:05

Roy Sonasish

4,571
20
31

Note that `#b`'s content will "wrap around" (extending below) the floated `#c` element. http://jsfiddle.net/zFANM/1/ – Fabrício Matté Jun 12 '13 at 12:18
in this case you need to give a right margin in to the '#b' http://jsfiddle.net/zFANM/2/ – Roy Sonasish Jun 12 '13 at 12:25
Had something similar in mind, +1 -- maybe add a note about it in the answer – Fabrício Matté Jun 12 '13 at 12:27

score 2 · Answer 2 · answered Jun 12 '13 at 12:32

Working jsFiddle Demo

enter image description here

You should put your fixed element before the other one:

<div id="a">
    <div id="c">
        FIXED ELEMENT
    </div>
    <div id="b">
        FLEXIBLE ELEMENT
    </div>
</div>

And in CSS:

#a {
    width: 80%;
    background: green;
    overflow: hidden;
}

#c {
    width: 50px;
    float: right;
    background: yellow;
}

#b {
    margin-right: 50px;
    background: pink;
}

score 1 · Answer 3 · answered Jun 12 '13 at 12:24

Floats aren't a great choice for layout purposes, since that's not really what it was designed for. If all you're looking for is to have 2 elements side-by-side and not the other aspects of float, I recommend the table* display properties instead:

http://cssdeck.com/labs/tbarj05i

#a{
  width: 80%;
  display: table;
}
#b{
  display: table-cell;
}
#c{
  width: 50px;
  display: table-cell;
}

score 0 · Answer 4 · answered Jun 12 '13 at 11:57

0

I would suggest giving #C a percentage value instead of pixels, or find out the total width and set it to that minus 50px.

Also did you try width:100%?

answered Jun 12 '13 at 11:57

Torylon

81
1
10

score -1 · Answer 5 · answered Jun 12 '13 at 11:58

width: 100% for B is his container's width, hope this illustrates:

<html>
<head>
<style>
div{ border: solid 1px #ccc;}
#a{
width: 80%;
}
#b{
width: 100%;
float:left;
}
#c{
width: 50px;
float:right;
}
</style></head><body>
<div id="a">
<div id="b">DIV B
</div>
<div id="c">DIV C
</div>
</div>
</body>
</html>

(CSS) how I could make the div takes all available space in width without a specific value but there is another div in the same place with a specific

I have this issue I can't find a solution for it:

5 Answers5