DIVs next to each other and prevent line breaks ( with css only) - css

Question

I have 3 DIVs: 1. suiteBar, 2. ribbonMain, 3. ribbonSub
I like to display the DIVs in the following way:
DIV1 (suiteBar) : right (without a specific width)
DIV2 (ribbonMain) : left in the same line with DIV1 (width: 100%)
DIV3 (ribbonSub) : under DIV1+DIV2 over the full width from both DIVs
Is that possible? Everytime when I give my DIV2 a width from 100% it makes a 'line Break'... See my example on fiddle and code here:
http://jsfiddle.net/dkHZS/
#topHeader {
display: block;
}
#suiteBar {
background-color: Aqua;
float: right;
display: inline;
}
#ribbon {
background-color: Lime;
float: left;
display: inline;
width: 100%;
}
#ribbonSub {
background-color: Gray;
}
<div id="topHeader">
<div id="suiteBar">suiteBar</div>
<div id="ribbon">ribbonMain
<div id="ribbonSub">ribbonSub</div>
</div>
</div>

Answer 1

Don't float the ribbon div:
#suiteBar {
background-color: Aqua;
float: right;
}
#ribbon {
background-color: Lime;
}
http://jsfiddle.net/dkHZS/4/
Also, when you float an element, it becomes a block element, so setting it to inline won't matter.

Answer 2

Use overflow:hidden on the right div: http://jsfiddle.net/dkHZS/6/
You could do something like this:
<div id="left">
</div>
<div id="right">
</div>
<div id="bottom">
</div>
CSS:
#left{
float:left;
width: 90%;
background: green;
height:20px;
}
#right{
overflow:hidden;
background: blue;
height:20px;
}
#bottom{
width: 100%;
float:left;
background: red;
height:20px;
}

Answer 3

Check this fiddle.
I use position.
This method also works good.
http://jsfiddle.net/hassaan39/NbX7P/