I have 3 DIVs: 1. suiteBar, 2. ribbonMain, 3. ribbonSubI like to display the DIVs in the following way
IV1 (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 DIVsIs 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:\[quote\] http://jsfiddle.net/dkHZS/\[/quote\]\[code\] #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>\[/code\]
IV1 (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 DIVsIs 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:\[quote\] http://jsfiddle.net/dkHZS/\[/quote\]\[code\] #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>\[/code\]