javascript - Responsive web design using right floating elements -

i know lot of responsive design uses percentage width , absolute positioning adapt screen widths of different media types. if can take advantage of float right css style not commonly used highly cross browser compatible?

demo: http://jsfiddle.net/3a89q/48/

.wrapper { width: 70%; margin: 0 auto; } div, span { display: block; float: left; position: relative; } .wrapper > div { width: 60px; } .b1 { background-color: blue; height: 132px; } .b2 { background-color: red; height: 88px; } .b3 { background-color: green; height: 44px; } .test { background-color: black; max-width: 160px; min-width: 100px; float: right; border: 2px solid black; } .test div { width: 16px; height: 16px; background-color: yellow; margin: 2px; }   <section class="wrapper">     <div class="b1"></div>     <div class="b2"></div>     <div class="b3"></div>     <span class="test">         <div></div>         <div></div>         <div></div>     </span> </section> 

my idea shrink right floating element minimum width without using percentages. shrinking process should occur on condition of neighboring elements restricting available space of element when window width reduced in size. if available space available said element not restricted, element increase width max length. virtually element has max , min width governing given range of flexibility in size. (note: range of width can demonstrated shrinking results window small size in jsfiddle demo have linked above.)

at time if right floating element merges left floating element, float down underneath left floating element maintaining max width.

my desired result have right floating element shrink minimum size before floating down under neighbor. once element reaches min-size drop down under neighbor , in turn increase width fill in remaining space max width, , begin repeat process of adapting available space while floating right.

my question is, can desired results accomplished using css / css3? if not, there javascript / jquery plugin performs functionality? have linked jsfiddle demo above understand , utilize solution idea.

thank help.

have though using css media tags target different screen sizes?

here reference link.

http://webdesignerwall.com/tutorials/css3-media-queries

a jquery approach using resize event handler, , adjusting css accordingly jquery. when browser window has been resized. alternative during document when ready, can calculate widths , heights dynamically.

see stack solution using jquery size of viewport

here reference link

http://api.jquery.com/resize/