DIV inline-block + width 100% - css

Question

I can't display a few DIV's in one line. display: inline-block and float: left doesn't work. My site width is not fixed so I want it to be dynamic to fit any width of screen.
HTML:
<div id="all">
<div id="a">25px</div>
<div id="b">200px</div>
<div id="c">
<div id="c1">100%</div>
<div id="c2">100%</div>
<div id="c3">100%</div>
</div>
500px
</div>
CSS:
DIV {
margin:5px;
font-size:10px;
}
DIV#all {
width:500px;
border:1px dotted black;
}
DIV#a {
display:inline-block;
width:25px;
height:200px;
border:1px solid red;
color:red;
}
DIV#b {
display:inline-block;
width:150px;
height:200px;
border:1px solid green;
color:green;
}
DIV#c {
display:inline-block;
width:auto;
height:200px;
border:1px solid blue;
color:blue;
}
DIV#c1 {
width:auto;
border:1px dotted blue;
color:blue;
}
DIV#c2 {
width:auto;
border:1px dotted blue;
}
DIV#c3 {
width:auto;
border:1px dotted blue;
color:blue;
}​
Live Demos:
PROBLEM: http://jsfiddle.net/BC2d9/
RESOLVED: http://jsfiddle.net/RAds3/ (display:table)
​

Answer 1

The problem with your current attempt is the width: 100%; on the third column div#c. 100% here will be 100% of its parent - which contains all three columns. Depending on what level of flexibility you want you have a few options.
If the site width is fixed, set a fixed width for the third column.
If you want the third column to stretch to its content, set max-width.
If you want the third column to stretch to fill its parent, you're probably better off with (css) tables.
Check out http://somacss.com/cols.html for a great resource on css column layout.

Answer 2

Problem is with third column. You can't set width to 100%. Also, you need float: left;. Here is fixed code:
<div id="all">
<div id="a">25px</div>
<div id="b">200px</div>
<div id="c">
<div id="c1">100%</div>
<div id="c2">100%</div>
<div id="c3">100%</div>
</div>
<div style="clear:both;"></div>
500px
</div>
and CSS:
DIV {
margin:5px;
font-size:10px;
}
DIV#all {
width:500px;
border:1px dotted black;
}
DIV#a {
float: left;
width:25px;
height:200px;
border:1px solid red;
color:red;
}
DIV#b {
float: left;
width:200px;
height:200px;
border:1px solid green;
color:green;
}
DIV#c {
float: left;
width:210px;
min-height:190px;
border:1px solid blue;
color:blue;
padding: 5px;
}
DIV#c1 {
width:100%;
border:1px dotted blue;
color:blue;
margin: 0 0 5px 0;
}
DIV#c2 {
width:100%;
border:1px dotted blue;
margin: 0 0 5px 0;
}
DIV#c3 {
width:100%;
border:1px dotted blue;
color:blue;
margin: 0 0 5px 0;
}​
And also LIVE DEMO

Answer 3

If your site width is fixed, then just replace 100% with all remained width in the container.Example: jsFiddle
If you want it to be dynamic and to fit any width of screen, I think it's not possible with pure CSS. I made it with jQuery:
var containerWidth = $('#all').outerWidth();
var widthLeft = $('#a').outerWidth(true) + $('#b').outerWidth(true);
var widthRight = containerWidth - widthLeft - 20; // 20px = spacing between elements
$('#c').css('width', widthRight+ 'px');
$('#c1, #c2, #c3').css('width', widthRight-10+ 'px'); // 10 = padding on the right side
Modified CSS:
DIV#c {
display:inline-block;
height:200px;
border:1px solid blue;
color:blue;
float: right;
}
DIV#c1 {
border:1px dotted blue;
color:blue;
}
DIV#c2 {
border:1px dotted blue;
}
DIV#c3 {
border:1px dotted blue;
color:blue;
}
Removed width: 100% and set float:right to #c.
Live demo: jsFiddle

Answer 4

Check out this update. I hope is good enough :)
DIV {
margin:5px;
font-size:10px;
}
DIV#all {
width:500px;
border:1px dotted black;
}
DIV#a {
display:inline-block;
width:25px;
height:200px;
border:1px solid red;
color:red;
float:left;
}
DIV#b {
display:inline-block;
width:150px;
height:200px;
border:1px solid green;
color:green;
float:left;
}
DIV#c {
display:inline-block;
width:277px;
height:200px;
border:1px solid blue;
padding:0 7px 0 5px;
color:blue;
float:left;
}
DIV#c1 {
width:100%;
margin:5px 0;
border:1px dotted blue;
color:blue;
}
DIV#c2 {
width:100%;
margin:5px 0;
border:1px dotted blue;
}
DIV#c3 {
width:100%;
margin:5px 0;
border:1px dotted blue;
color:blue;
}

Answer 5

div { float:left; width:10px; height:10px; }
Helps?