1

I know a lot of responsive design uses percentage width and absolute positioning to adapt to screen widths of different media types. But what if we can take advantage of the float right css style that is not commonly used but 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 is to shrink a right floating element to a minimum width without using percentages. This shrinking process should only occur on the condition of neighboring elements restricting the available space of the element when the window width is reduced in size. If the available space available to said element is not restricted, the element will increase its width to a max length. So virtually the element has a max and a min width governing a given range of flexibility in size. (Note: This range of width can be easily demonstrated by shrinking the results window to a small size in the jsfiddle demo I have linked above.)

At this time if the right floating element merges into a left floating element, it will float down underneath the left floating element maintaining its max width.

My desired result is to have this right floating element shrink to its minimum size before floating down under its neighbor. Once the element reaches its min-size it will drop down under its neighbor and in turn increase its width to fill in the remaining space up to its max width, and begin to repeat the process of adapting to its available space while floating right.

My question is, can my desired results be accomplished by just using css / css3? If not, is there a JavaScript / jQuery plugin that performs this functionality? I have linked a jsfiddle demo above to help you understand and utilize a solution to this idea.

Thank you for your help.

Nathan
  • 11
  • 1
  • 4
  • Well formed question. Using JS/jQuery will work but almost defeats the purpose in mobile-first responsiveness considering that JS is expensive on mobile devices, as well as not all devices will even execute javascript. – CP510 Aug 20 '13 at 02:51

1 Answers1

0

Have you though about using CSS media tags to target different screen sizes?

here is a reference link.

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

A jQuery approach would be using a resize event handler, and adjusting the CSS accordingly with jQuery. This will be for only when the browser window has been resized. Alternative during document when ready, you can calculate widths and heights dynamically.

see this stack solution Using jQuery To Get Size of Viewport

here is another reference link

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

Community
  • 1
  • 1
James Nicholson
  • 987
  • 10
  • 20
  • Yes I use media tags all the time. I am just looking at responsive-design at a different perspective and trying out new avenues of possible solutions and outcomes. This is not a problem I have just an idea that can turn into a possible jQuery Plugin or something useful. Thank you for your input. – Nathan Aug 20 '13 at 14:37